// Your custom variables

.alert-no-margin {
  margin: 0;
}

html,
body {
  min-height: 100%;
  height: 100%;
}

body {
  overflow-x: auto;
  margin: 0;
}

.debug {
  background-color: $debug-bg-colour;
  color: $debug-colour;
}

// Top nav
#top-nav {
  background-color: $top-nav-bg-colour;
  border-bottom: 1px solid $top-nav-bottom-border-colour;
}

#top-nav .navbar-brand,
#top-nav .nav-item a {
  color: $top-nav-item-colour;
}

#top-nav .nav-item .active {
  font-weight: bold;
  background-color: $top-nav-active-bg-colour;
}

/* Alerts and form errors used by phx.new */
.alert {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  border-radius: 0px;
}

.alert-rounded {
  border-radius: 4px;
}

.alert p {
  margin-bottom: 0;
}

.alert:empty {
  display: none;
}

.invalid-feedback {
  color: $invalid-feedback;
  display: block;
  margin: -1rem 0 2rem;
}

.phx-click-loading {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}

.phx-disconnected {
  cursor: wait;
}

.phx-disconnected * {
  pointer-events: none;
}

.phx-modal {
  opacity: 1 !important;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.phx-modal-content {
  background-color: $phx-modal-bg-colour;
  margin: 15vh auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.phx-modal-close {
  color: $phx-modal-close-colour;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.phx-modal-close:hover,
.phx-modal-close:focus {
  color: $phx-modal-close-colour-hover;
  text-decoration: none;
  cursor: pointer;
}

.menu-card .panel-body {
  padding: 0;
}

.menu-card .panel-body:hover {
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}

.menu-card a,
.menu-card span {
  /*border: 1px solid #000;*/

  display: block;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;

  font-size: 1.6em;
  line-height: 2em;

  color: $menu-card-link-colour;

  text-decoration: none;

  /*text-shadow: 2px 2px 2px rgba(0,0,0,0.05);*/

  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.menu-card a:hover,
.menu-card span:hover {
  color: $menu-card-link-colour-hover;

  cursor: pointer;
  text-shadow: 2px 2px 2px $shadow;
}

/* Page sub menu */
.sub-menu {
  margin-top: 0;
}

.sub-menu .card {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.sub-menu .card-body {
  padding: 0 15px;
  padding: 0;
}

.sub-menu-icon a {
  margin: 0 5px;

  margin: 0;
  padding: 0;
}

.sub-menu-icon a {
  margin: 0;
  padding: 10px 0 5px 0;
  color: $sub-menu-icon-colour;

  border-bottom: 5px solid $sub-menu-icon-border-colour;

  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}

.sub-menu-icon a:hover {
  text-decoration: none;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}

.block-link {
  text-align: center;
  display: inline-block;

  /*background-color: #AAA;*/
  width: 100%;
  /*height: 100%;*/

  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}

.block-link:hover {
  text-decoration: none;
  color: $link-color;
}


// Section menu
.section-menu {
  margin-top: 20px;
}

.help-block {
  padding: 2px 5px;
  display: block;
  background-color: $danger-dark;
}

// Small tables
.table-sm {
  font-size: 0.9rem;
}

.table-sm .btn-sm {
  padding: 0.25rem 0.6rem;
}

//Ratings table
.table-ratings {
  font-size: 0.9rem;
}

//Map column for Ratings table
.table-ratings tr th:nth-child(1) {
  width: 12.5rem;
}

//Change columns - ensure minimum width for icons to stay on same line
.table-ratings tr td:nth-child(5),
.table-ratings tr td:nth-child(7),
.table-ratings tr td:nth-child(9),
.table-ratings tr td:nth-child(11) {
  min-width: 4.5rem;
}

.table-ratings th {
  padding: 0.5rem;
  min-width: 5rem;
}

.table-ratings td {
  padding: 0.5rem;
  min-width: 3rem;
}



// We want out outline buttons to be filled in when you mouseover or activate them
@mixin button-outline-variant($color) {
  & {
    color: $button-outline-colour;
  }

  &:hover {
    color: $button-outline-colour-hover;
    background-color: $color;
  }

  &:focus,
  &.focus {
    color: $button-outline-focus-colour;
    background-color: transparent;
  }

  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $button-outline-active-colour;
    background-color: $color;

    &:focus {
      box-shadow: none;
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

.row-left {
  width: 145px;
}

body.modal-open {
  overflow: visible;
}

// Live search
.picker-input {
  /*height: 42px;*/
  height: 100%;
}

.picker-modal-close {
  font-size: 2em;
}

// Forms and inputs
input[type="color"] {
  min-height: 2rem;
  padding: 0.2rem;
}

#breadcrumb-right {
  float: right;
  // padding: 7px 8px 0 0;
}

.old-help-box,
.old-help-box-large {
  padding: 15px;
  border-radius: 4px;
  display: none;
  padding-bottom: 3px;
  margin-bottom: 3px;

  background-color: shift-color($primary2, $alert-bg-scale);
  border: 1px solid shift-color($primary2-dark, $alert-border-scale);
  color: $dark;
}

.old-help-box-large {
  padding: 15px;
  margin: 20px;
}

.help-box,
.help-box-large {
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 3px;

  background-color: shift-color($primary2, $alert-bg-scale);
  border: 1px solid shift-color($primary2-dark, $alert-border-scale);
  color: $dark;
}

.help-box-large {
  padding: 15px;
  margin: 20px;
}

.frosted {
  border-radius: 8px;
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.admin {
  border-color: $admin;
}

.admin {
  border-color: $staff;
}

.monospace {
  font-family: monospace;
}

.cursor-pointer {
  cursor: pointer;
}

.control-label {
  font-weight: bold;
}

.autumn-hl {
  padding: 4px 4px 4px 12px;
}

.blog-post-content img {
  max-width: 100%;
}