18F/18f.gsa.gov

// Header
// ==========================
header[role=banner] {
  ul {
    @include unstyled-list;

    // *TODO*: De-nest this once we fix lists in WDS
    li {
      display: inline-block;
      background: transparent;
      width: auto;

      a {
        @include u-padding-y(2.5);

        color: color('gray-cool-60');
        font-weight: $theme-font-weight-bold;
        text-decoration: none;

        &:hover,
        &:focus {
          background-color: $color-gray-hover;
          color: $color-black;
        }

        &:active {
          background-color: color('gray-cool-5');
        }

        &.usa-current {
          color: $color-black;

          span {
            border-bottom: $border-accent;
            padding-bottom: 1.4rem;

            @-moz-document url-prefix() {
              padding-bottom: 1.3rem; // Current nav link border highlight fix for Firefox
            }

            @media screen and (-webkit-min-device-pixel-ratio:0) {
              padding-bottom: 1.45rem; // Current nav link border highlight fix for Safari
            }
          }
        }
      }
    }
  }

  nav[role=navigation] {
    @include u-margin-y(2);
    display: none;
    float: right;
    font-size: $theme-small-font-size;

    @include at-media('tablet-lg') {
      display: block;
    }
  }
}

.site-logo {
  @include u-margin-y(0);
  display: block;
  float: left;

  img {
    width: 4.4rem;
  }
}

// scss-lint:disable PropertyCount
.menu-btn {
  @include button-unstyled;
  background-color: $color-medium;
  border-radius: units($theme-border-radius-md);
  color: color('white');
  display: inline;
  float: right;
  font-size: $h6-font-size;
  line-height: 2rem;
  height: 3rem;
  margin-right: 1rem;
  width: 5.8rem;
  text-align: center;
  text-decoration: none;

  @include at-media('desktop') {
    display: none;
  }

  &:hover {
    color: color('white');
    background-color: $color-dark;
  }

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

.usa-nav__primary > .usa-nav__primary-item {
  a {
    @include at-media('desktop') {
      @include u-padding-x(1);

    }
  }
}