// JOA - Nav

@import "../../base-shared";

.usajobs-joa-nav {
  display: none;
  margin-bottom: 0;
  @include boxShadow(1);

  @include media($M) {
    display: block;
    // "Stickyness" is handled in nav-secondary.scss
  }

  &__body {
    padding: 0 $size-default;
    border-bottom: 0;

    @include media($ML) {
      padding-left: $size-M;
      padding-right: 0;
    }
  }

  &__item {
    font-size: $small-font-size;
    color: $color-base;

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

    &:hover {
      color: $color-primary;
      text-decoration: underline;
    }

    &.is-active,
    &[data-state="is-active"] {
      color: $color-base;
      border-bottom: 6px solid $color-gold;
      padding-bottom: 5px;

      @include media($ML) {
        padding-bottom: $size-S;
      }
    }
  }
}