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

$navigation-sub-height: 8rem;
$navigation-sub-height-mobile: $header-height-mobile;

.sub-nav-placeholder {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  visibility: hidden;
  z-index: z("below");

  &.is-fixed {
    height: ($navigation-sub-height-mobile + .1);

    @media (min-width: $min-720) {
      height: ($navigation-sub-height + .1);
    }
  }
}

.sub-nav {
  background-color: $color-white;
  font-size: 0;
  height: ($navigation-sub-height-mobile + .1);
  margin: 0;
  padding: 0;
  position: relative;
  transform: translateZ(0); // force hardware acceleration for iOS
  transition: opacity $animation-speed, visibility $animation-speed;

  @media (min-width: $min-720) {
    height: ($navigation-sub-height + .1);
  }

  &.is-fixed {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: z("top");
  }

  &.is-bottom {
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    visibility: hidden;
  }

  &__wrap {
    &::after {
      border-bottom: .1rem solid $color-gray;
      content: "";
      display: block;
      margin: 0 ($gutter / 2);
      max-width: $max-width;
    }

    @media (min-width: $min-720) {
      @include container-padded();

      &::after {
        margin: 0;
      }
    }
  }

  &__container {
    height: $navigation-sub-height-mobile;
    overflow: hidden;

    @media (min-width: $min-720) {
      height: $navigation-sub-height;
    }

    &::before,
    &::after {
      bottom: 0;
      content: "";
      display: block;
      position: absolute;
      top: 0;
      width: ($gutter / 2);
    }

    &::before {
      background: linear-gradient(to right, rgba($color-white, 1) 0%, rgba($color-white, 0) 100%);
      left: 0;
    }

    &::after {
      background: linear-gradient(to left, rgba($color-white, 1) 0%, rgba($color-white, 0) 100%);
      right: 0;
    }
  }

  &__list {
    animation: fly-in $animation-speed-ui;
    height: ($navigation-sub-height-mobile + 2); // to push horizontal scrollbar out of view
    margin: 0;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    text-align: center;
    transition: opacity $animation-speed;
    white-space: nowrap;
    width: 100%;

    @media (min-width: $min-480) {
      animation: none;
    }

    @media (min-width: $min-720) {
      height: $navigation-sub-height;
    }
  }

  &__item {
    display: inline-block;
    line-height: $navigation-sub-height-mobile;
    margin: 0;
    padding: 0;

    @media (min-width: $min-720) {
      height: 100%;
      line-height: $navigation-sub-height;
    }

    &--active,
    a:hover,
    a:focus {
      color: $lpblue;
    }

    &--maps {
      @media (max-width: $max-960) {
        display: none;
      }
    }
  }

  &__link {
    color: $titlegray;
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    padding: .2rem ($gutter / 2) 0;
    text-transform: uppercase;
    transition: 300ms color ease-in;

    &--active {
      color: $lpblue;
    }

    @media (min-width: $min-720) {
      font-weight: 600;
      height: 100%;
    }
  }

  @media (min-width: $min-480) and (max-width: $min-720) {
    &__item:first-child &__link {
      padding-left: $gutter;
    }

    &__item:last-child &__link {
      padding-right: $gutter;
    }
  }
}