Meta Nav

/* Meta Navigation */

.meta-nav {
  $root: &;

  @include typography-level('meta-nav');

  display: flex;

  &__list {
    padding-left: 0;
    list-style: none;
  }

  &__item {
    display: block;
  }

  &__link {
    display: block;
    padding: 2px 0;
    color: inherit;
  }

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

    flex-direction: column;

    &.-collapse {
      display: none;
    }

    &__link {
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover,
      &:active,
      &.-active {
        color: $primary;
      }

      &:hover,
      &:active {
        text-decoration: none;
      }
    }

    &__list {
      &:not(:first-child) {
        border-bottom: 1px solid $gray-lighter;
      }
    }

    &__lang-nav {
      order: 1;
      width: 100%;
      text-align: left;

      &.-expand {
        + .meta-nav__list {
          display: none;
        }

        .lang-nav__list {
          position: static;
          display: block;

          .lang-nav__item {
            &:hover,
            &:active {
              background-color: inherit;
              color: $primary;
            }
          }
        }
      }

      .lang-nav__link {
        &:hover,
        &:active {
          color: $primary;
        }
      }

      .lang-nav__selection {
        &:hover {
          color: $primary;
        }

        &.-next,
        &.-prev {
          cursor: pointer;
        }

        &.-prev {
          @include typography-level('main-nav-active-link');

          color: $primary;

          &::after {
            content: '';
          }
        }

        &.-next::after,
        &.-prev::before {
          position: absolute;
          top: 50%;
          width: 2rem;
          height: 2rem;
          transform: translateY(-50%);
          line-height: inherit;
          color: inherit;
        }

        &.-next::after {
          $symbol: map-get($icons, 'chevron-right');

          @include icon-content-extended($symbol, inline-block);

          right: 0;
          text-align: right;
        }

        &.-prev::before {
          $symbol: map-get($icons, 'chevron-left');

          @include icon-content-extended($symbol, inline-block);

          left: 0;
          text-align: left;
        }

        .lang-nav__text {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

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

          &__link {
            padding: 0 rem-calc($gutter);
          }

          &__lang-nav {
            .lang-nav__selection {
              margin: rem-calc($gutter) 0;
              padding: 0;

              .lang-nav__text {
                padding: 0 rem-calc($gutter);
              }
            }

            .lang-nav__link {
              margin: rem-calc($gutter) 0;
              padding: 0;

              &:first-child {
                margin-top: 0;
              }

              .lang-nav__text {
                padding: 0 rem-calc($gutter);
              }
            }
          }
        }
      }
    }
  }

  @include breakpoint(pre-large) {
    @include typography-level('meta-nav-pre-medium');

    justify-content: flex-end;

    &__list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin-top: $header-lang-nav-padding-top;
    }

    &__item {
      margin: 0 $base-margin;
    }

    &__lang-nav {
      text-align: right;
    }
  }
}