// 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-navigation-width) {
      float: right;
    }
  }

  // Accessibility: The <div> with search role
  [role=search] {
    @include at-media($theme-navigation-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-navigation-width) {
      border-top: units(1px) solid color('white');
    }
  }

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

.usa-logo {
  @include at-media-max($theme-navigation-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-navigation-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-navigation-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 0.2s ease-in-out;
  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-navigation-width) {
    .usa-navbar {
      position: relative;
      width: $theme-megamenu-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-current,
    [aria-expanded=true],
    .usa-nav__link:hover {
      @include nav-border-basic;
    }

    .usa-nav__primary {
      width: auto;
    }

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

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

// usa-header--extended
// ---------------------------------

.usa-header--extended {
  @include at-media($theme-navigation-width) {
    padding-top: 0;

    .usa-current,
    [aria-expanded=true],
    .usa-nav__link:hover {
      @include nav-border-extended;
    }
  }

  .usa-logo {
    @include at-media($theme-navigation-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-navigation-width) {
      @include grid-container;
      display: block;
      height: auto;
      overflow: auto;
    }
  }

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

  .usa-nav__inner {
    @include at-media($theme-navigation-width) {
      @include grid-container;
      padding-left: units(2) !important; /* stylelint-disable declaration-no-important  */
      position: relative;
    }
  }

  .usa-nav__primary {
    @include at-media($theme-navigation-width) {
      @include clearfix;
    }
  }

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

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

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