// Navigation helpers // ———————————

@mixin primary-nav-link {

line-height: line-height($theme-navigation-font-family, 1);
padding: units(2);

}

$nav-link-color: “base-dark”; $sliding-panel-width: “card-lg”; $nav-link-accordion-icon-size: 2.5; $nav-link-arrow-icon-size: 2;

// TODO: Collect animations in a common location? @keyframes slidein-left {

from {
  transform: translateX(units($sliding-panel-width));
}

to {
  transform: translateX(0);
}

}

// Header navigation // ——————————— .usa-nav {

@include typeset($theme-navigation-font-family, null, 1);
@include at-media-max($theme-header-min-width) {
  @include u-pin("right");
  @include u-pin("y");
  position: fixed;
  background: color("white");
  border-right: 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: units(2);
  width: units($sliding-panel-width);
  z-index: z-index(500);

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

@include at-media($theme-header-min-width) {
  float: right;
  position: relative;
}

.usa-search {
  @include at-media($theme-header-min-width) {
    margin-left: units(2);
  }
}

.usa-accordion {
  @include typeset($theme-navigation-font-family, null, 1);
}

}

// Primary navigation // ———————————

.usa-nav__primary {

// Until the $theme-header-width,
// use the usa-nav-list styles for the slide-in nav
@include at-media-max($theme-header-min-width) {
  @include nav-list("nav");
  margin-top: units(3);
  order: 2;

  a {
    @include u-padding-y(1.5);
  }
}

// At $theme-header-width and wider...
@include at-media($theme-header-min-width) {
  display: flex;
}

// all nav items in the nav
.usa-nav__primary-item {
  a {
    text-decoration: none;
  }
}

// just level 1 nav items...
> .usa-nav__primary-item {
  line-height: line-height($theme-navigation-font-family, 2);
  @include at-media($theme-header-min-width) {
    font-size: font-size($theme-navigation-font-family, "2xs");
    line-height: line-height($theme-navigation-font-family, 1);
  }

  // ...and their direct links
  > a {
    @include at-media($theme-header-min-width) {
      @include primary-nav-link;
      color: color($nav-link-color);
      display: block;
      font-weight: font-weight("bold");

      &:hover {
        color: color("primary");
      }
    }
  }
}

a {
  @include at-media($theme-header-min-width) {
    @include u-padding-y(1);
  }
}

button {
  $button-vertical-offset: 53%; // XXX: Magic number

  @include button-unstyled;
  color: color($nav-link-color);
  font-weight: font-weight("normal");
  line-height: line-height($theme-navigation-font-family, 2);
  padding: units(1.5) units(2);
  text-decoration: none;

  @include at-media($theme-header-min-width) {
    @include primary-nav-link;
    font-size: font-size($theme-navigation-font-family, "2xs");
    font-weight: font-weight("bold");
  }

  &:hover {
    color: color("primary");
    background-color: color("base-lightest");
    text-decoration: none;

    @include at-media($theme-header-min-width) {
      background-color: transparent;
    }
  }

  &[aria-expanded="false"] {
    /* stylelint-disable-line selector-no-qualifying-type */
    @include add-background-svg("usa-icons/add");
    background-position: right 0 center;
    background-size: units($nav-link-accordion-icon-size);

    @include at-media($theme-header-min-width) {
      @include add-background-svg("usa-icons/expand_more");
      background-size: units($nav-link-arrow-icon-size);
      background-position: right units(1.5) top $button-vertical-offset;
    }

    &:hover {
      @include at-media($theme-header-min-width) {
        @include add-background-svg(
          "usa-icons-bg/expand_more--blue-warm-70v"
        );
      }
    }
  }

  &[aria-expanded="true"] {
    /* stylelint-disable-line selector-no-qualifying-type */
    @include add-background-svg("usa-icons/remove");
    background-position: right 0 center;
    background-size: units($nav-link-accordion-icon-size);

    @include at-media($theme-header-min-width) {
      @include add-background-svg("usa-icons-bg/expand_less--white");
      @include add-knockout-font-smoothing;
      background-size: units($nav-link-arrow-icon-size);
      background-color: color("primary-darker");
      background-position: right units(1.5) top $button-vertical-offset;
      color: color("white");
    }
  }
}

.usa-accordion__button {
  span {
    @include at-media($theme-header-min-width) {
      margin-right: 0;
      padding-right: units(2);
    }
  }
}

}

// Secondary navigation // ———————————

.usa-nav__secondary {

margin-top: units(2);

@include at-media($theme-header-min-width) {
  @include u-flex("column", "align-end");
  bottom: units(8); // XXX magic number
  display: flex;
  font-size: font-size($theme-navigation-font-family, "2xs");
  margin-top: units(1);
  min-width: calc(
    #{$theme-search-min-width} + #{units($theme-button-small-width)}
  );
  position: absolute;
  right: units($theme-site-margins-width);
}

.usa-search {
  margin-top: units(2);
  width: 100%;

  @include at-media($theme-header-min-width) {
    margin-left: 0;
    margin-top: units(1);
  }
}

}

.usa-nav__secondary-links {

@include add-list-reset;
line-height: line-height($theme-navigation-font-family, 3);
margin-top: units(3);

@include at-media($theme-header-min-width) {
  float: right;
  line-height: line-height($theme-navigation-font-family, 1);
  margin-bottom: units(0.5);
  margin-top: 0;
}

.usa-nav__secondary-item {
  @include at-media($theme-header-min-width) {
    display: inline;
    padding-left: units(0.5);

    & + .usa-nav__secondary-item::before {
      color: color("base-lighter");
      content: "|";
      padding-right: units(0.5);
    }
  }
}

a {
  color: color("base");
  display: inline-block;
  font-size: font-size($theme-navigation-font-family, "2xs");
  text-decoration: none;

  &:hover {
    color: color("primary");
    text-decoration: underline;
  }
}

}

// Navigation dropdowns // ———————————

.usa-nav__submenu {

@include at-media-max($theme-header-min-width) {
  @include nav-sublist;
}

@include at-media($theme-header-min-width) {
  @include add-list-reset;
  background-color: color("primary-darker");
  width: units("card-lg");
  padding: units(2);
  position: absolute;
  z-index: z-index(400);
}

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

.usa-nav__submenu-item {
  @include at-media($theme-header-min-width) {
    & + * {
      margin-top: units(1.5);
    }

    a {
      color: color("white");
      padding: 0;
      line-height: line-height($theme-navigation-font-family, 3);

      &:hover {
        background-color: transparent;
        color: color("white");
        padding: 0;
        text-decoration: underline;
      }
    }
  }
}

}

.usa-nav__submenu-list {

@include unstyled-list;

.usa-nav__submenu-list-item {
  margin: 0;
  font-size: font-size($theme-navigation-font-family, "2xs");

  a {
    line-height: line-height($theme-navigation-font-family, 3);
  }
}

}

// Navigation close button // ———————————

.usa-nav__close {

@include button-unstyled;
@include u-square($size-touch-target);
color: currentColor;
flex: none;
float: right;
margin: units(-1.5) units(-2) units(2) auto;
text-align: center;

&:hover {
  color: currentColor;
  text-decoration: none;
}

@include at-media($theme-header-min-width) {
  display: none;
}

img {
  width: units(3);
}

+ * {
  clear: both;
}

}

.usa-js-mobile-nav–active {

overflow: hidden;

}