// Header variables ———- //

$height-nav-secondary: 5rem; $width-nav-sidebar: 250px;

// z-indexes - TODO refactor to a site-wide z-index management approach $z-index-header: 7000; $z-index-overlay: 8000; $z-index-nav: 9000;

// Header ————- //

.usa-header {

width: 100%;
z-index: $z-index-header;

@include media($nav-width) {
  border-bottom: 1px solid $color-gray-lighter;
}

a {
  border-bottom: none;
}

.usa-search {
  @include media($nav-width) {
    float: right;
    max-width: 21.5rem;
  }
}

}

.usa-logo {

float: left;
line-height: 4rem;
margin-left: 1.5rem;

@include media($nav-width) {
  line-height: 7.5rem;
  margin-left: 0;
}

a {
  color: $color-base;
  text-decoration: none;
}

br {
  display: none;

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

}

.usa-logo-text {

display: block;
font-size: $h5-font-size;
font-style: normal;
font-weight: $font-bold;
margin: 0;

@include media($nav-width) {
  display: block;
  font-size: 2.4rem;
  line-height: $heading-line-height;
}

}

.usa-menu-btn {

/* stylelint-disable declaration-block-no-ignored-properties */
@include button-unstyled;
background-color: $color-primary;
color: $color-white;
display: inline;
float: right;
font-size: $h6-font-size;
height: 4rem;
line-height: 4rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 5.8rem;
/* stylelint-enable */

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

&:hover {
  color: $color-white;
  background-color: $color-primary-darker;
}

&:visited {
  color: $color-white;
}

}

.usa-overlay {

@include position(fixed, 0);
background: $color-black;
opacity: 0;
transition: opacity 0.2s ease-in-out;
visibility: hidden;
z-index: $z-index-overlay;

&.is-visible {
  opacity: 0.1;
  visibility: visible;
}

}

// Basic header ———– //

.usa-header-basic {

.usa-logo {
  @include media($nav-width) {
    bottom: 0;
    position: absolute;
  }
}

.usa-navbar {
  @include media($nav-width) {
    position: relative;
    width: 18%; // TODO: review this more
  }
}

}

// Extended header ———– //

.usa-header-extended {

.usa-header {
  @include media($nav-width) {
    border-bottom: none;
  }
}

.usa-logo {
  @include media($nav-width) {
    @include margin(3rem null);
  }
}

em {
  @include media($nav-width) {
    font-size: 3.2rem;
    line-height: 1;
  }
}

.usa-navbar {
  @include media($nav-width) {
    @include outer-container($site-max-width);
    @include padding(null $site-margins);
    display: block;
    height: auto;
  }
}

.usa-nav {
  @include media($nav-width) {
    border-top: 1px solid $color-gray-lighter;
    float: none;
    padding: 0;
    width: 100%;
  }
}

.usa-nav-inner {
  @include media($nav-width) {
    @include outer-container($site-max-width);
    @include padding(null $site-margins null 1.5rem);
    margin-top: -1px;
    position: relative;
  }
}

.usa-nav-primary {
  @include media($nav-width) {
    @include clearfix;
  }

  button {
    &[aria-expanded=false],
    &[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
      @include media($nav-width) { /* stylelint-disable-line selector-no-qualifying-type */
        background-position: right 1.5rem top 53%;
      }
    }
  }
}

.usa-nav-link {
  @include media($nav-width) {
    @include padding(1.8rem null);
  }
}

.usa-nav-submenu {
  .usa-grid-full {
    @include media($nav-width) {
      padding-left: 1.2rem;
    }
  }
}

.usa-megamenu {
  @include media($nav-width) {
    padding-left: $site-margins;
  }
}

}