.usa-header {

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

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

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

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

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

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

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

@include at-media($theme-header-min-width) {
  button[aria-expanded="true"],
  button[aria-expanded="true"]:hover,
  .usa-nav__submenu {
    @if variable-exists(top-nav-dropdown-bg) {
      background-color: color($top-nav-dropdown-bg);
    }
    span {
      @if variable-exists(top-nav-dropdown-link) {
        color: color($top-nav-dropdown-link);
      }
    }
  }
}

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

}