// Header navigation ------------- //

@mixin nav-border {
  border-bottom: 0.4rem solid $color-primary;
  padding-bottom: 0.6rem;
}

@mixin nav-border-thick {
  border-bottom: 0.7rem solid $color-primary;
  padding-bottom: 0.9rem;
}

.usa-navbar {
  border-bottom: 1px solid $color-gray-light;
  height: 4rem;

  @include media($nav-width) {
    border-bottom: none;
    display: inline-block;
    height: 7.8rem; // XXX magic number
  }
}

.usa-nav-link {
  @include font-smoothing;

  &:hover {
    span {
      @include media($nav-width) {
        @include nav-border;
      }
    }
  }

  &.usa-accordion-button {
    span {
      @include media($nav-width) {
        margin-right: 0;
        padding-right: 1.5rem;
      }
    }
  }
}

.usa-nav-container {
  @include media($nav-width) {
    @include outer-container($site-max-width);
    @include padding(null $site-margins);
  }
}

.usa-nav {
  $sliding-panel-width: 26rem;

  @keyframes slidein-left {
    from {
      transform: translateX($sliding-panel-width);
    }

    to {
      transform: translateX(0);
    }
  }

  @include position(fixed, 0 0 0 auto);
  background: $color-white;
  border-left: 1px solid $color-gray-light;
  border-right: 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 2rem;
  width: $sliding-panel-width;
  z-index: $z-index-nav;

  @include media($nav-width) {
    @include padding(4.5rem 0 0 null);
    border-left: none;
    display: block;
    float: right;
    overflow-y: visible;
    position: relative;
    transform: translateX(0);
    width: auto;
  }

  &.is-visible {
    animation: slidein-left 0.3s ease-in-out;
    display: flex;
  }

  nav {
    margin-top: 6rem; // XXX magic number
    min-height: 100%;

    @include media($nav-width) {
      margin-top: 0;
    }
  }

  .usa-current {
    border-left: 4px solid $color-primary;
    color: $color-primary;
    font-weight: $font-bold;
    padding-left: 1.4rem;

    @include media($nav-width) {
      color: $color-base;
    }
  }

  .usa-button {
    width: 100%;
  }

  .usa-search {
    @include media($nav-width) {
      margin-left: 1.5rem; // XXX magic number
      top: 4px;
    }
  }
}

// Primary navigation ------------- //

.usa-nav-primary {
  @include usa-sidenav-list;
  margin-top: 1.5rem;
  order: 2;

  @include media($nav-width) {
    display: inline;
  }

  li {
    @include media($nav-width) {
      border-top: none;
    }
  }

  > li {
    width: auto;

    @include media($nav-width) {
      display: inline-block;
      // margin-left: -4px;
    }

    > a {
      @include media($nav-width) {
        @include padding(1.3rem 1.5rem 2.2rem 1.5rem);
        color: $color-gray;
        font-size: $h5-font-size;
        font-weight: $font-bold;
        line-height: 1;
      }

      &:hover {
        @include media($nav-width) {
          background-color: transparent;
        }
      }
    }
  }

  a {
    @include media($nav-width) {
      @include padding(0.75rem null);
    }

    &:hover {
      @include media($nav-width) {
        // color: $color-base;
      }
    }
  }

  button {
    $button-vertical-offset: 40%;

    @include button-unstyled;
    @include font-smoothing;
    font-weight: $font-normal;
    line-height: 1.3;
    padding: 0.85rem 1.5rem 0.85rem 1.8rem;

    @include media($nav-width) {
      @include padding(1.3rem 1.5rem 2.2rem 1.5rem);
      color: $color-gray;
      font-size: $h5-font-size;
      font-weight: $font-bold;
      line-height: 1;
      width: initial;
    }

    &:focus,
    &:active {
      box-shadow: $focus-outline;
    }

    &:hover {
      background-color: $color-gray-lightest;
      color: $color-primary;

      @include media($nav-width) {
        background-color: transparent;
        // color: $color-base;
      }
    }

    &[aria-expanded=false] { /* stylelint-disable-line selector-no-qualifying-type */
      background-image: url('#{$image-path}/plus-alt.png');
      background-image: url('#{$image-path}/plus-alt.svg');
      background-repeat: no-repeat;
      background-position: right 0 center;
      background-size: 1rem;

      @include media($nav-width) {
        background-image: url('#{$image-path}/angle-arrow-down.png');
        background-image: url('#{$image-path}/angle-arrow-down.svg');
        background-position: right 1.5rem top $button-vertical-offset;
      }

      &:hover {
        @include media($nav-width) {
          background-image: url('#{$image-path}/angle-arrow-down-primary.png');
          background-image: url('#{$image-path}/angle-arrow-down-primary.svg');
        }
      }
    }

    &[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
      background-image: url('#{$image-path}/minus-alt.png');
      background-image: url('#{$image-path}/minus-alt.svg');
      background-repeat: no-repeat;
      background-position: right 0 center;
      background-size: 1rem;

      @include media($nav-width) {
        background-color: $color-primary-darkest;
        color: $color-white;
        background-image: url('#{$image-path}/angle-arrow-down-hover.png');
        background-image: url('#{$image-path}/angle-arrow-down-hover.svg');
        background-position: right 1.5rem top $button-vertical-offset;

        &:hover {
          background-color: $color-primary-darkest;
        }

        span {
          @include nav-border;
          color: $color-white;
        }
      }
    }
  }

  @include media($nav-width) {
    a.usa-current,
    .usa-current { // stylelint-disable-line selector-no-qualifying-type
      // undo the sidenav style
      border-left: 0;
      padding-left: 1.5rem;

      &:hover {
        span {
          color: $color-primary;
        }
      }

      span {
        @include nav-border;
        color: $color-base;
      }
    }
  }
}

// Extended header navigation ------- //

.usa-header-extended {
  .usa-nav-link {
    &:hover {
      span {
        @include media($nav-width) {
          @include nav-border-thick;
        }
      }
    }
  }

  .usa-nav-primary {
    button[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
      span {
        @include media($nav-width) {
          @include nav-border-thick;
        }
      }
    }

    .usa-current {
      @include media($nav-width) {
        span {
          @include nav-border-thick;
        }
      }
    }
  }
}

// Secondary navigation ----------- //

.usa-nav-secondary {
  margin-top: 1.5rem;

  @include media($nav-width) {
    margin-top: 0;
    position: absolute;
    right: $site-margins;
    top: -5.7rem; // XXX magic number
  }

  .usa-search {
    @include margin(1.5rem null 0 null);

    @include media($nav-width) {
      @include margin(-0.9rem null 0 0);
      float: left;
    }
  }
}

.usa-nav-secondary-links {
  margin-top: 2.4rem;

  @include media($nav-width) {
    float: left;
    margin-top: 0;
  }

  li {
    @include media($nav-width) {
      display: inline;
      padding-left: 0.5rem;
    }

    &:not(:last-child)::after {
      @include media($nav-width) {
        color: $color-gray-lighter;
        content: '|';
        padding-left: 0.5rem;
      }
    }
  }

  a,
  .usa-header-search-button {
    color: $color-gray;
    display: inline-block;
    font-size: $h5-font-size;
    text-decoration: none;

    &:hover {
      color: $color-primary;
      text-decoration: underline;
    }
  }

  .usa-header-search-button {
    @include button-unstyled;
    display: none;

    @include media($nav-width) {
      background-image: url('#{$image-path}/search-alt.png');
      background-image: url('#{$image-path}/search-alt.svg');
      background-repeat: no-repeat;
      background-position: left center;
      background-size: 2.2rem;
      display: inline-block;
      padding-left: 2.3rem;
    }

    &.is-hidden {
      @include media($nav-width) {
        display: none;
      }
    }
  }

  @include media($nav-width) {
    a.usa-current { // stylelint-disable-line selector-no-qualifying-type
      // undo the sidenav style
      border-left: 0;
      padding-left: 0;
    }
  }
}

// Navigation submenu (dropdown and mega menu) ----- //

.usa-nav-submenu {
  @include usa-sidenav-sublist;

  @include media($nav-width) {
    @include unstyled-list;
    @include padding(0.75rem null 0.9rem null);
    background-color: $color-primary-darkest;
    width: 21.5rem;
    position: absolute;
  }

  &[aria-hidden=true] {
    display: none;
  }

  a {
    @include media($nav-width) {
      color: $color-white;
      padding-left: 1.5rem; // XXX magic number
    }

    &:hover {
      @include media($nav-width) {
        background-color: $color-primary-darkest;
        color: $color-white;
        padding-left: 1.5rem;
        text-decoration: underline;
      }
    }

    // this used to be necessary to undo the `usa-sidenav-sublist`
    // include, above
    // &:hover,
    // &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
    //   @include media($nav-width) {
    //     padding-left: 1.8rem;
    //   }
    // }
  }

  li {
    font-size: $h5-font-size;
    margin-bottom: 0;
  }
}

// Navigation close button -------- //

.usa-nav-close {
  @include button-unstyled;
  @include margin(-1.2rem -1.5rem 1.5rem auto);
  color: currentColor;
  float: right;
  height: $hit-area;
  text-align: center;
  width: $hit-area;

  &:hover {
    color: currentColor;
  }

  @include media($nav-width) {
    display: none;
  }

  img {
    width: 1.3rem;
  }

  + * {
    clear: both;
  }
}

.usa-mobile_nav-active {
  overflow: hidden;
}

// Navigation mega menu -------- //

@mixin outer-megamenu {
  background-color: $color-primary-darkest;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 1000%;
}

.usa-megamenu {
  @include media($nav-width) {
    @include padding(3.15rem null); // XXX magic number
    // XXX this is the difference between the 2rem padding-left
    // of .usa-nav-inner and the $site-margins (3rem) padding-left
    // of .usa-megamenu
    left: -1rem;
    width: 100%;
  }

  &::before {
    @include media($nav-width) {
      @include outer-megamenu;
      right: 100%;
    }
  }

  &::after {
    @include media($nav-width) {
      @include outer-megamenu;
      left: 100%;
    }
  }
}

.usa-header-basic-megamenu {
  .usa-nav {
    @include media($nav-width) {
      padding-left: 0;
      padding-top: 0;
      width: 100%;
    }
  }

  .usa-nav-inner {
    display: flex;
    flex-direction: column;

    @include media($nav-width) {
      display: block;
      float: right;
      margin-top: -3.8rem;
    }
  }

  .usa-nav-submenu {
    .usa-grid-full {
      @include media($nav-width) {
        margin-left: -1.8rem; // XXX magic number
      }
    }
  }
}

.usa-megamenu-col {
  @include media($nav-width) {
    @include span-columns(3);

    &:nth-child(2n) {
      @include span-columns(3);
    }

    &:nth-child(4n) {
      margin-right: 0;
    }
  }

  > ul {
    @include unstyled-list;
  }
}