// =============================================================================
// header.scss - Header styles
// ========================================================================== */
.header {
  background: $header-bg;
  box-shadow: $header-box-shadow;
  margin-bottom: $header-margin-bottom;
  padding: $header-padding-y $header-padding-x 0;
  &-nav-toggler {
    background: $header-bg;
    color: $link-color;
    font-size: 1.5rem;
    position: relative;
    z-index: 11;

    $selector: #{&};
    @at-root {
      body.main-nav-open {
        @include media-breakpoint-down(sm) {
          #{$selector} {
            .icon-css-burger {
              background: transparent;
              &:after {
                transform: translate(0, -200%) rotate(-45deg) scale(.9);
              }
              &:before {
                transform: translate(0, 200%) rotate(45deg) scale(.9);
              }
            }
          }
        }
      }
    }

    .icon-css-burger {
      &:after,
      &:before {
        transform-origin: 50% 50%;
        transform: translate(0, 0) rotate(0deg) scale(1);
      }
    }
  }
  &-search-form {
    flex-wrap: nowrap;
    left: 0;
    position: relative;
    top: -.375rem;
    transition: all .2s linear;
    max-width: 3.5rem;
    @include media-breakpoint-down(sm) {
      top: -.5rem;
    }
    &-input {
      border: none;
      border-bottom: 1px solid rgba($gray, .8);
      box-shadow: 0 1px 1px -1px rgba($gray, .8);
      flex: none;
      margin-right: .5rem;
      padding: 0 .125rem;
      position: relative;
      transition: width .2s linear, $input-transition;
      width: 2rem !important;
      @include media-breakpoint-down(sm) {
        top: -.25rem;
      }
      @include media-breakpoint-down(xs) {
        width: 1.5rem !important;
      }
      &:focus {
        box-shadow: 0 4px 8px -2px $input-box-shadow-focus;
      }
    }
    &-submit {
      background: transparent;
      color: $gray;
      font-size: 1rem;
      padding: 0;
      @include hover-focus {
        color: $black;
      }
    }
    $selector: #{&};
    &#{$selector}--focused {
      left: -4rem;
      top: -2rem;
      @include media-breakpoint-down(md) {
        left: -2rem;
        top: -1.25rem;
      }
      @include media-breakpoint-down(sm) {
        left: -4rem;
        top: -.5rem;
      }
      #{$selector}-input {
        width: 10rem !important;
        @include media-breakpoint-down(md) {
          width: 6rem !important;
        }
      }
    }
  }
  @include media-breakpoint-down(md) {
    padding: 0;
  }
}