// 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;
}

}