.usa-header {

.usa-nav {
  @if variable-exists(top-nav-bg) {
    background-color: $top-nav-bg;
  }
}

.usa-nav-primary {
  a,
  button {
    &:hover {
      @if variable-exists(top-nav-link-hover-bg) {
        background-color: $top-nav-link-hover-bg;
      }
    }
  }

  .usa-nav-link {
    span {
      @if variable-exists(top-nav-link) {
        color: $top-nav-link;
      }
    }

    &:hover {
      @if variable-exists(top-nav-link-hover) {
        color: $top-nav-link-hover;
      }

      span {
        @if variable-exists(top-nav-link-current) {
          border-bottom-color: $top-nav-link-current;
        }
        @if variable-exists(top-nav-link-hover) {
          color: $top-nav-link-hover;
        }
      }
    }
  }

  .usa-current,
  button[aria-expanded=true] {
    span {
      @if variable-exists(top-nav-link-current) {
        border-color: $top-nav-link-current;
      }
      @if variable-exists(top-nav-link-current) {
        color: $top-nav-link-current;
      }
    }
  }
}

button[aria-expanded=true],
button[aria-expanded=true]:hover,
.usa-nav-submenu {
  @if variable-exists(top-nav-dropdown-bg) {
    background-color: $top-nav-dropdown-bg;
  }
}

.usa-nav-submenu {
  a:hover {
    @if variable-exists(top-nav-dropdown-link-hover-bg) {
      background-color: $top-nav-dropdown-link-hover-bg;
    }
    @if variable-exists(top-nav-dropdown-link) {
      color: $top-nav-dropdown-link;
    }
  }
}

}