Header: Behr

/* Header */

@include breakpoint(medium down) {
  // stylelint-disable-next-line selector-no-qualifying-type
  body.-noscroll {
    overflow: hidden;
  }
}

:root {
  --logo-width: 140px;
}

.header {
  $root: &;

  position: relative;
  z-index: 1100;
  background-color: $white;

  &.-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;

    @include breakpoint(pre-large) {
      #{$root}__logo,
      #{$root}__meta-nav,
      #{$root}__search-bar {
        display: none;
      }
    }

    &__wrapper {
      padding-top: 0;
    }
  }

  &__wrapper {
    max-width: rem-calc($container-max-width);
    margin: 0 auto;

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        $gutter: rem-calc($gutter / 2);
        padding: $gutter $gutter 0;
      }
    }

    &.-no-menu {
      @each $breakpoint, $gutter in $grid-gutters {
        @include breakpoint($breakpoint) {
          $gutter: rem-calc($gutter / 2);
          padding: $gutter $gutter;
        }
      }
    }
  }

  &__head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid $gray-lighter;

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        padding: rem-calc($gutter / 2);
      }
    }
  }

  &__foot {
    flex: none;
    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        padding: rem-calc($gutter) rem-calc($gutter * 2);
      }
    }
  }

  &__logo {
    width: 120px;
  }

  &__hamburger {
    top: 50%;
    display: block;
    margin-top: $hamburger-height / -2;
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

    &,
    &::before,
    &::after {
      position: absolute;
      width: $hamburger-width;
      height: $hamburger-height;
      border-radius: $hamburger-border-radius;
      background-color: $black;
      transition-property: transform;
      transition-duration: 0.15s;
      transition-timing-function: ease;
    }

    &::before,
    &::after {
      content: '';
      display: block;
    }

    &::before {
      top: ($hamburger-spacing + $hamburger-height) * -1;
      transition: top 0.075s 0.12s ease, opacity 0.075s ease;
    }

    &::after {
      bottom: ($hamburger-spacing + $hamburger-height) * -1;
      transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
  }

  &__toggle {
    position: relative;
    display: inline-block;
    width: $hamburger-width;
    height: $hamburger-height * 3 + $hamburger-spacing * 2;
    margin-top: $hamburger-margin-top;
    margin-right: $hamburger-margin-right;

    &.-active {
      #{$root}__hamburger {
        transform: rotate(45deg);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-delay: 0.12s;

        &::before {
          top: 0;
          opacity: 0;
          transition: top 0.075s ease, opacity 0.075s 0.12s ease;
        }

        &::after {
          bottom: 0;
          transform: rotate(-90deg);
          transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
        }
      }
    }
  }

  // stylelint-disable-next-line order/order
  @include breakpoint(medium down) {
    $only: -zf-breakpoints-less-than(pre-large);

    &__wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 0;
    }

    &__body,
    &__foot {
      display: none;
    }

    &__body {
      flex: auto;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;

      @each $breakpoint, $gutter in $grid-gutters {
        @if (false != index($only, $breakpoint)) {
          @include breakpoint($breakpoint) {
            padding: rem-calc($gutter);
          }
        }
      }
    }

    &__foot {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        z-index: 1;
        height: 3.6rem;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), $white 100%);
        pointer-events: none;
      }
    }

    &__logo,
    &__search-bar {
      &.-vanishing {
        display: none;
      }
    }

    &__meta-nav {
      border-top: 1px solid $gray-lighter;

      @each $breakpoint, $gutter in $grid-gutters {
        @if (false != index($only, $breakpoint)) {
          @include breakpoint($breakpoint) {
            margin-top: rem-calc($gutter / 2);
            padding-top: rem-calc($gutter / 2);
          }
        }
      }

      &.-alone {
        margin: 0;
        padding: 0;
        border: 0;
      }
    }

    &__main-nav {
      order: -1;
    }

    &.-overlay {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      #{$root}__body {
        display: flex;
      }

      #{$root}__foot {
        display: block;
      }
    }
  }

  @include breakpoint(pre-large) {
    border-bottom: 1px solid $gray-lighter;

    &__head,
    &__foot {
      display: none;
    }

    &__body {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    &__logo {
      width: var(--logo-width);
    }

    &__meta-nav {
      flex: 1;
      margin: (1.6rem - $header-lang-nav-padding-top) 1rem 0;
    }

    &__search-bar {
      margin-top: 1.6rem;
    }

    &__main-nav {
      width: 100%;
      padding-top: 1.5rem;
    }
  }
}