Sticky Nav

.sticky-nav {
  $root: &;
  $only: -zf-breakpoints-less-than(large);

  @include breakpoint(large) {
    margin: rem-calc($paragraph-margin / 2) 0;
    padding: 0 rem-calc($paragraph-margin / 2);
  }

  &.-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10000;
    margin: 0;
  }

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

    position: relative;
    border-bottom: 1px solid $gray-dark;
    background: $white;

    @include breakpoint(large) {
      max-width: calc(#{rem-calc($container-max-width)} - 2.4rem);
      margin: 0 auto;
      background: $white;
    }
  }

  &__toggle {
    @include typography-level('sticky-nav');

    @each $breakpoint, $gutter in $grid-gutters {
      @if (false != index($only, $breakpoint)) {
        @include breakpoint($breakpoint) {
          $gutter: rem-calc($gutter);
          padding: 2 * $base-padding $gutter + $sticky-nav-icon-right 2 * $base-padding $gutter;
        }
      }
    }

    display: block;
    background-color: $black;
    font-family: inherit;
    color: $white;
    cursor: pointer;

    @include breakpoint(large) {
      display: none;
    }

    &.-active {
      background-color: $gray-light;
      color: $black;

      + #{$root}__list {
        max-height: rem-calc(2000);
      }

      &::after {
        $symbol-active: map-get($icons, 'chevron-up');
        @include icon-content-extended($symbol-active);
      }
    }

    &:hover,
    &:focus,
    &:active {
      color: $white;
      text-decoration: none;

      &.-active {
        color: $black;
      }
    }

    &::after {
      $symbol: map-get($icons, 'chevron-down');
      @include icon-content-extended($symbol);

      position: absolute;
      top: 50%;
      right: $sticky-nav-icon-right;
      transform: translate(0, -50%);
    }
  }

  &__list {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;

    @include breakpoint(pre-large down) {
      @include typography-level('sticky-nav');
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      z-index: 1020;
      height: auto;
      max-height: 0;
      overflow: hidden;
      background: $white;
      transition: max-height 0.2s ease-in-out;
    }

    @include breakpoint(large) {
      display: flex;
      flex-flow: row wrap;
      column-gap: rem-calc($paragraph-margin * 0.75);
    }
  }

  &__item {
    margin: 0;
    margin-bottom: -1px;

    @include breakpoint(large) {
      padding: 0 $base-padding;
    }

    &.-active {
      @include breakpoint(large) {
        border-bottom: 2px solid $primary;
        font-weight: 700;
        color: $primary;
      }
    }
  }

  &__link {
    display: block;
    padding: 2 * $base-padding;
    font-weight: inherit;
    font-family: inherit;
    color: $black;

    @include breakpoint(large) {
      padding: $base-padding 0;
      color: inherit;
    }

    &:hover,
    &:focus,
    &:active {
      color: $primary;
      text-decoration: none;

      @at-root #{$root}__item.-active & {
        @include breakpoint(large) {
          color: inherit;
        }
      }

      @include breakpoint(pre-large down) {
        background-color: $secondary;
        color: $white;
      }
    }
  }
}