// Header helpers // ———————————

@mixin nav-border-extended {

@include add-bar(0.5, "primary", "bottom", 0, 2);

}

@mixin nav-border-basic {

@include add-bar(0.5, "primary", "bottom", 0, 2, -0.5);

}

$z-index-header: 300; $z-index-overlay: 400;

// Header // ———————————

.usa-header {

@include clearfix;
@include typeset($theme-header-font-family);
@include border-box-sizing;
z-index: z-index($z-index-header);

a {
  border-bottom: none;
}

// The search <form>
.usa-search {
  @include at-media($theme-header-min-width) {
    float: right;
  }
}

// Accessibility: The <div> with search role
[role="search"] {
  @include at-media($theme-header-min-width) {
    float: right;
    max-width: calc(
      #{$theme-search-min-width} + #{units($theme-button-small-width)}
    );
    width: 100%;
  }
}

// The search <input>
[type="search"] {
  min-width: 0; // Fix a Firefox display quirk
}

+ .usa-hero {
  @include at-media($theme-header-min-width) {
    border-top: units(1px) solid color("white");
  }
}

+ .usa-section,
+ main {
  @include at-media($theme-header-min-width) {
    border-top: units(1px) solid color("base-lighter");
  }
}

}

.usa-logo {

@include at-media-max($theme-header-min-width) {
  @include u-flex("fill");
  font-size: font-size($theme-header-font-family, "2xs");
  line-height: line-height($theme-header-font-family, 1);
  margin-left: units($theme-site-margins-mobile-width);
}

@include at-media($theme-header-min-width) {
  margin-top: units(4);
  margin-bottom: units(2);
  font-size: font-size($theme-header-font-family, "lg");
  line-height: line-height($theme-header-font-family, 2);
}

a {
  color: color("ink");
  text-decoration: none;
}

}

.usa-logo__text {

display: block;
font-style: normal;
font-weight: font-weight("bold");
margin: 0;

}

.usa-menu-btn {

@include button-unstyled;
@include u-flex("auto");
@include u-padding-x(1.5);
background-color: color("primary");
color: color("white");
font-size: font-size($theme-header-font-family, "3xs");
height: units($size-touch-target);
text-align: center;
text-decoration: none;
text-transform: uppercase;

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

&:hover {
  background-color: color("primary-dark");
  color: color("white");
  text-decoration: none;
}

&:active {
  color: color("white");
}

&:visited {
  color: color("white");
}

}

.usa-overlay {

@include u-pin("all");
position: fixed;
background: color("black");
opacity: opacity(0);
transition: opacity $project-easing;
visibility: hidden;
z-index: z-index($z-index-overlay);

&.is-visible {
  opacity: opacity(20);
  visibility: visible;
}

}

// usa-header–basic // ———————————

.usa-header–basic {

@include at-media($theme-header-min-width) {
  .usa-navbar {
    position: relative;
    width: $theme-header-logo-text-width; // TODO: review this more
  }

  .usa-nav {
    @include u-flex("row", "align-center", "justify-end");
    display: flex;
    padding: 0 0 units(0.5) units(1);
    width: 100%;
  }

  .usa-nav-container {
    @include u-flex("align-end", "justify");
    display: flex;
  }

  .usa-nav__primary-item > .usa-current,
  .usa-nav__link:hover {
    @include nav-border-basic;
  }

  // Don't show extended border if dropdown is active.
  .usa-nav__link[aria-expanded="true"]::after,
  .usa-nav__link[aria-expanded="true"]:hover::after {
    display: none;
  }

  .usa-nav__primary {
    width: auto;
  }

  // Issue #3401: last dropdown gets cutoff.
  .usa-nav__primary-item:last-of-type {
    position: relative;

    .usa-nav__submenu {
      @include u-pin-right;
    }
  }

  .usa-search {
    top: 0;
  }
}
&.usa-header--megamenu {
  .usa-nav__inner {
    display: flex;
    flex-direction: column;

    @include at-media($theme-header-min-width) {
      display: block;
      float: right;
      margin-top: units(-5);
    }
  }

  .usa-nav__primary-item:last-of-type {
    @include at-media($theme-header-min-width) {
      position: static;
    }
  }
}

}

// usa-header–extended // ———————————

.usa-header–extended {

@include at-media($theme-header-min-width) {
  padding-top: 0;

  .usa-nav__primary-item > .usa-current,
  .usa-nav__primary-item > .usa-nav__link:hover {
    @include nav-border-extended;
  }

  // Don't show extended border if dropdown is active.
  .usa-nav__link[aria-expanded="true"]::after,
  .usa-nav__link[aria-expanded="true"]:hover::after {
    display: none;
  }
}

.usa-logo {
  @include at-media($theme-header-min-width) {
    font-size: font-size($theme-header-font-family, "xl");
    margin: units(4) 0 units(3);
    max-width: 50%;
  }
}

.usa-navbar {
  @include at-media($theme-header-min-width) {
    @include grid-container($theme-header-max-width);
    display: block;
    height: auto;
    overflow: auto;
  }
}

.usa-nav {
  @include at-media($theme-header-min-width) {
    border-top: units(1px) solid color("base-lighter");
    padding: 0;
    width: 100%;
  }
}

.usa-nav__inner {
  @include at-media($theme-header-min-width) {
    @include grid-container($theme-header-max-width);
    position: relative;
  }
}

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

.usa-nav__link {
  @include at-media($theme-header-min-width) {
    @include u-padding-y(2);
  }
}

.usa-nav__submenu {
  .usa-grid-full {
    @include at-media($theme-header-min-width) {
      padding-left: units(1.5);
    }
  }
}

.usa-nav__submenu.usa-megamenu {
  @include at-media($theme-header-min-width) {
    left: 0;
    padding-left: units($theme-site-margins-width);
  }
}

}

// [uswds-init.js] Offscreen content while js is loading html.usa-js-loading {

.usa-nav__submenu {
  @include add-sr-only;
}

}