@import "../../../sass/webpack_deps";

.navigation {
  font-size: 0;
  line-height: $header-height;
  user-select: none;

  &__list,
  &__item {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__item {
    display: inline-block;
    margin-left: 1.7rem;
    position: relative;

    &:not(:last-child) {
      margin-right: 1.7rem;
    }

    &:first-child {
      display: none;

      @media (min-width: $min-720) and (max-width: $max-1200) {
        display: inline-block;
      }
    }

    &--active {
      border-bottom: .4rem solid $color-white;
      height: $header-height;
    }

    &--user > .navigation__link {
      border: .1rem solid rgba($color-white, .6);
      border-radius: 1.7rem;
      line-height: 0;
      padding: 1.7rem 2rem 1.5rem;
      transition: background-color $animation-speed, border-color $animation-speed;

      &:hover,
      &:active,
      &:focus {
        background-color: rgba($color-white, .1);
        border-color: rgba($color-white, .38);
        color: $color-white;
      }

      .navigation--narrow & {
        border-color: rgba($titlegray, .6);

        &:hover,
        &:active,
        &:focus {
          background-color: rgba($titlegray, .02);
          border-color: rgba($titlegray, .15);
          color: $titlegray;
        }
      }
    }
  }

  .navigation--narrow &__item--active {
    border-bottom-color: transparent;
  }

  &__link {
    color: $color-white;
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    transition: color $animation-speed;

    &:hover,
    &:active,
    &:focus {
      color: rgba($color-white, .6);
    }
  }

  &__item--active &__link {
    &:hover,
    &:active,
    &:focus {
      color: $color-white;
    }
  }

  .navigation--narrow &__link {
    color: $titlegray;

    &:hover,
    &:active,
    &:focus {
      color: rgba($titlegray, .38);
    }
  }

  .navigation--narrow &__item--active &__link {
    color: $lpblue;
  }

  &__counter {
    $size: 1.7rem;
    background: $color-red;
    border-radius: 50%;
    box-shadow: 0 .1rem .2rem rgba($color-black, .2);
    color: $color-white;
    font-family: $benton-sans;
    font-size: 1.3rem;
    font-weight: 600;
    height: $size;
    line-height: 1;
    margin-top: -($size);
    position: absolute;
    right: -($size / 3);
    text-align: center;
    text-indent: 0;
    top: 50%;
    user-select: none;
    width: $size;
  }
}

.sub-navigation {
  $top: ($header-height - $gutter);
  $left: 50%;
  $width: 34rem;
  $margin-left: -($width / 2);
  $padding-top: 0;
  @include dropdown-menu($top, $left, $width, $margin-left, $padding-top);

  &::before {
    @include dropdown-menu-arrow;
  }

  // The last subnav item gets hidden when the screen smaller
  // Make sure it works at large as well though
  .navigation__item:last-child & {
    @media (max-width: $max-1530) {
      left: auto;
      margin-left: 0;
      right: 0;

      &::before {
        left: auto;
        right: 1.6rem;
      }
    }
  }

  &--visible,
  .navigation__item:hover & {
    @include dropdown-menu-visible;
  }

  &__list {
    padding-bottom: 2.8rem;
    padding-top: 2.8rem;

    .mobile-sub-navigation & {
      padding: 0;
    }
  }

  .sub-navigation-feature + &__list {
    padding-top: 0;
  }

  &__item {
    font-size: 1.6rem;
    line-height: 1;
    margin-left: $gutter;
    margin-right: $gutter;
    position: relative;

    .mobile-sub-navigation & {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }

    &:not(:first-child) {
      border-top: .1rem solid rgba($color-light-slate, .5);
    }

    &--current::before {
      background-color: $color-red;
      border-radius: 100%;
      bottom: 0;
      content: "";
      display: block;
      height: .4rem;
      left: -1.7rem;
      margin-bottom: auto;
      margin-top: auto;
      position: absolute;
      top: 0;
      width: .4rem;
      z-index: z("default");
    }
  }

  &__link {
    color: $darkgray;
    display: block;
    padding-bottom: .8rem;
    padding-top: 1rem;
    position: relative;

    .mobile-sub-navigation & {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  &__item--current &__link:hover::after,
  &__item--current &__link:active::after,
  &__item--current &__link:focus::after {
    background-color: transparent;
  }

  &__link::after {
    background-color: transparent;
    content: "";
    height: calc(100% + .2rem);
    left: -#{$gutter};
    position: absolute;
    right: -#{$gutter};
    top: -.1rem;
    transition: background-color ($animation-speed / 2) linear;
    width: calc(100% + #{$gutter} + #{$gutter});
    z-index: z("below");
  }

  &__link:hover::after,
  &__link:active::after,
  &__link:focus::after {
    background-color: $active-background-color;
  }

  &__button {
    @include button;
    border-radius: 0 0 $radius $radius;
    display: block;
    padding-bottom: 1.9rem;
    padding-top: 2.3rem;
  }
}

.sub-navigation-feature {
  border-bottom: .1rem solid $color-gray;
  display: block;
  overflow: hidden;
  padding: $gutter $gutter 2rem;
  position: relative;

  .mobile-sub-navigation & {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }

  &__image {
    display: block;
    float: left;
    height: auto;
    margin-right: 2.6rem;
    width: 8rem;

    .mobile-sub-navigation & {
      margin-right: 1.4rem;
      width: 6rem;
    }
  }

  &__text {
    float: left;
    line-height: 1;
    padding-top: 1.5rem;

    .mobile-sub-navigation & {
      padding-top: .8rem;
    }
  }

  &__title {
    color: $darkgray;
    font-size: 1.6rem;
    transition: color $animation-speed linear;
  }

  &:hover &__title {
    color: $lpblue;
  }

  &__subtitle {
    color: $light-text-color;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: .4rem;
    text-transform: uppercase;
  }
}

.mobile-sub-navigation {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms;

  &.is-expanded {
    max-height: 700px;
  }
}