/**
 * Theme Styles
 */

.light-theme {
  background-color: $light;
  color: $dark;
  @include angleBoxShadows($light);
  input[type=checkbox] {
    color: $dark;
    & + label {
      color: $dark;
    }
  }
  a:not(.button):not(.icon-button):not(.chip):not(.no-hover):not(.no-link-styles) {
    $link-color: setLinkColor($light);
    color: $link-color;
    &:hover {
      color: setLinkHoverColor($link-color);
    }
  }
  .search {
    input[type=text] {
      background-color: $light;
    }
  }
  .filter {
    background-color: $light;
  }
}

.dark-theme {
  background-color: $dark;
  color: $light;
  @include angleBoxShadows($dark);
  input[type=checkbox] {
    color: $light;
    & + label {
      color: $light;
    }
  }
  a:not(.button):not(.icon-button):not(.chip):not(.no-hover):not(.no-link-styles) {
    $link-color: setLinkColor($dark);
    color: $link-color;
    &:hover {
      color: setLinkHoverColor($link-color);
    }
  }
  .search {
    input[type=text] {
      background-color: $dark-gray;
      color: white;
      &::placeholder {
        color: white;
      }
    }
  }
  .filter {
    background-color: $dark-gray;
    color: $light;
    .dropdown {
      background-color: $dark-gray;
    }
  }
}

.primary-theme {
  background-color: $primary-color;
  color: setTextColor($primary-color);
  @include angleBoxShadows($primary-color);
  input[type=checkbox] {
    color: setTextColor($primary-color);
    & + label {
      color: setTextColor($primary-color);
    }
  }
  a:not(.button):not(.icon-button):not(.chip):not(.no-hover):not(.no-link-styles) {
    $link-color: setLinkColor($primary-color);
    color: $link-color;
    &:hover {
      color: setLinkHoverColor($link-color);
    }
  }
  .search {
    input[type=text] {
      background-color: $quaternary-color;
      color: setTextColor($quaternary-color);
      &::placeholder {
        color: setTextColor($quaternary-color);
      }
    }
  }
  .filter {
    background-color: $quaternary-color;
    color: setTextColor($quaternary-color);
    .dropdown {
      background-color: $quaternary-color;
    }
  }
}

.secondary-theme {
  background-color: $secondary-color;
  color: setTextColor($secondary-color);
  @include angleBoxShadows($secondary-color);
  input[type=checkbox] {
    color: setTextColor($secondary-color);
    & + label {
      color: setTextColor($secondary-color);
    }
  }
  a:not(.button):not(.icon-button):not(.chip):not(.no-hover):not(.no-link-styles) {
    $link-color: setLinkColor($secondary-color);
    color: $link-color;
    &:hover {
      color: setLinkHoverColor($link-color);
    }
  }
}

.tertiary-theme {
  background-color: $tertiary-color;
  color: setTextColor($tertiary-color);
  @include angleBoxShadows($tertiary-color);
  input[type=checkbox] {
    color: setTextColor($tertiary-color);
    & + label {
      color: setTextColor($tertiary-color);
    }
  }
  a:not(.button):not(.icon-button):not(.chip):not(.no-hover):not(.no-link-styles) {
    $link-color: setLinkColor($tertiary-color);
    color: $link-color;
    &:hover {
      color: setLinkHoverColor($link-color);
    }
  }
}

.quaternary-theme {
  background-color: $quaternary-color;
  color: setTextColor($quaternary-color);
  @include angleBoxShadows($quaternary-color);
  input[type=checkbox] {
    color: setTextColor($quaternary-color);
    & + label {
      color: setTextColor($quaternary-color);
    }
  }
  a:not(.button):not(.icon-button):not(.chip):not(.no-hover):not(.no-link-styles) {
    $link-color: setLinkColor($quaternary-color);
    color: $link-color;
    &:hover {
      color: setLinkHoverColor($quaternary-color);
    }
  }
}

.primary-accent {
  input[type=checkbox] {
    & + label {
      &:after {
        color: $primary-color;
      }
    }
  }
  .button, .icon-button {
    &:not(.icon-button) {
      @include applyButtonStyles();
    }
    background-color: $primary-color;
    color: setTextColor($primary-color);
    &:hover {
      background-color: setLinkHoverColor($primary-color);
    }
  }

  .search {
    input[type=text] {
      &:hover {
        border-color: $primary-color;
      }
      &:focus {
        border-color: $primary-color;
      }
    }
  }
  .filter {
    &.open {
      border-color: $primary-color;
      .dropdown-toggle {
        color: $primary-color;
      }
    }
    &:hover {
      border-color: $primary-color;
      .dropdown-toggle {
        color: $primary-color;
      }
    }
    .dropdown {
      li {
        &:hover {
          background-color: $primary-color;
          color: setTextColor($primary-color);
        }
      }
    }
  }
}

.secondary-accent {
  input[type=checkbox] {
    & + label {
      &:after {
        color: $secondary-color;
      }
    }
  }
  .button, .icon-button  {
    &:not(.icon-button) {
      @include applyButtonStyles();
    }
    background-color: $secondary-color;
    color: setTextColor($secondary-color);
    &:hover {
      background-color: setLinkHoverColor($secondary-color);
    }
  }

  .search {
    input[type=text] {
      &:hover {
        border-color: $secondary-color;
      }
      &:focus {
        border-color: $secondary-color;
      }
    }
  }
  .filter {
    &.open {
      border-color: $secondary-color;
      .dropdown-toggle {
        color: $secondary-color;
      }
    }
    &:hover {
      border-color: $secondary-color;
      .dropdown-toggle {
        color: $secondary-color;
      }
    }
    .dropdown {
      li {
        &:hover {
          background-color: $secondary-color;
          color: setTextColor($secondary-color);
        }
      }
    }
  }
}

.tertiary-accent {
  input[type=checkbox] {
    & + label {
      &:after {
        color: $tertiary-color;        
      }
    }
  }
  .button, .icon-button  {
    &:not(.icon-button) {
      @include applyButtonStyles();
    }
    background-color: $tertiary-color;
    color: setTextColor($tertiary-color);
    &:hover {
      background-color: setLinkHoverColor($tertiary-color);
    }
  }

  .search {
    input[type=text] {
      &:hover {
        border-color: $tertiary-color;
      }
      &:focus {
        border-color: $tertiary-color;
      }
    }
  }
  .filter {
    &.open {
      border-color: $tertiary-color;
      .dropdown-toggle {
        color: $tertiary-color;
      }
    }
    &:hover {
      border-color: $tertiary-color;
      .dropdown-toggle {
        color: $tertiary-color;
      }
    }
    .dropdown {
      li {
        &:hover {
          background-color: $tertiary-color;
          color: setTextColor($tertiary-color);
        }
      }
    }
  }
}

.light-accent {
  .button, .icon-button  {
    &:not(.icon-button) {
      @include applyButtonStyles('ghost');
    }
    &:hover {
      color: $dark;
    }
  }

  .search {
    input[type=text] {
      &:hover {
        border-color: $light;
      }
      &:focus {
        border-color: $light;
      }
    }
  }
  .filter {
    &.open {
      border-color: $light;
      .dropdown-toggle {
        color: $light;
      }
    }
    &:hover {
      border-color: $light;
      .dropdown-toggle {
        color: $light;
      }
    }
    .dropdown {
      li {
        &:hover {
          background-color: $light;
          color: setTextColor($light);
        }
      }
    }
  }
}

.dark-accent {
  .button, .icon-button  {
    &:not(.icon-button) {
      @include applyButtonStyles('dark-ghost');
    }
    &:hover {
      color: $light;
    }
  }

  .search {
    input[type=text] {
      &:hover {
        border-color: $dark;
      }
      &:focus {
        border-color: $dark;
      }
    }
  }
  .filter {
    &.open {
      border-color: $dark;
      .dropdown-toggle {
        color: $dark;
      }
    }
    &:hover {
      border-color: $dark;
      .dropdown-toggle {
        color: $dark;
      }
    }
    .dropdown {
      li {
        &:hover {
          background-color: $dark;
          color: setTextColor($dark);
        }
      }
    }
  }
}

/**
 * Background Styles
 */

.bg-fit {
  padding-top: calculateRem(125);
  padding-bottom: calculateRem(125);
}

.bg-tall {
  min-height: 60vh;
}

.bg-full {
  min-height: 100vh;
  position: relative;
  @include breakpoint(mobileonly) {
    min-height: 60vh;
  }
}

/**
 * Additional Options Styles
 */


.group {
  .row {
    &.negative-margin-top {
      z-index: 10;
      @include breakpoint(mobile) {
        margin-top: calculateRem($mobile-negative-margin);
      }
      @include breakpoint(tablet) {
        margin-top: calculateRem($negative-margin);
      }
    }
    &.negative-margin-bottom {
      z-index: 10;
      @include breakpoint(mobile) {
        margin-bottom: calculateRem($mobile-negative-margin);
      }
      @include breakpoint(tablet) {
        margin-bottom: calculateRem($negative-margin);
      }
    }
    &.negative-margin-top.negative-margin-bottom {
      z-index: 11;
    }
  }
}


#header + .page-content .content-chevron {
  width: 100%;
  z-index: 11;
  position: absolute;
  bottom: calculateRem(20);
  left: 0;
  text-align: center;
  cursor: pointer;
  @include breakpoint(mobileonly) {
    display: none;
  }
}

#header + .page-content > .group:first-child {
  .row.bg-full:first-child {
    min-height: calc(100vh - #{$header-height}px);
    height: 0;
    @include breakpoint(mobileonly) {
      min-height: calc(80vh - #{$header-height}px);
      &.bg-fixed {
        video {
          height: 100%;
          position: absolute;
          z-index: auto;
        }
      }
    }
  }
}

#header.floating + .page-content > .group:first-child, #header.floating + .post > .group:first-child {
  .row:first-child {
    &.bg-full {
      min-height: 100vh;
      height: 0;
      @include breakpoint(mobileonly) {
        min-height: 80vh;
      }
    }
    &.bg-fit:not(.video_only_hero-row):not(.hover_object-row):not(.hover_grid_object-row):not(.hero_with_info_box-row) {
      padding-top: calc(#{$header-height}px + 125px);
      &:not(.no-padding-bottom) {
        padding-bottom: calculateRem($header-height);
      }
      &.reflexive_list-row {
        padding-bottom: calculateRem(50);
      }
    }
    &.bg-tall {
      padding-top: calc(#{$header-height}px + 62.5px);
      padding-bottom: calc(#{$header-height}px + 62.5px);
    }
  }
}
