@charset "UTF-8";
@use "../../feature/lookAndFeel/feel" as feel;
@use "../../feature/lookAndFeel/style-guide" as style;

.nav {
  > li > a:focus {
    background-color: transparent;
  }
}

.nav > li > a {
  @include media-breakpoint-down(sm) {
    padding:   5px;
    font-size: 12px;
  }
}

.nav-link {
  color:  $gray-light;
  cursor: pointer;

  &:hover {
    color: inherit;
  }
}

.nav-pills { // TODO Remove after new homepage
  .nav-link {
    &.nav-link-style-only {
      // Style an element to look like a nav link, 
      // without any functionality of nav link.
      cursor: default;
    }
  }
}

.nav-pills {
  border-bottom: 1px solid $card-border-color;

  .nav-link {
    cursor:        pointer;
    color:         #777777;
    border-bottom: 2px solid transparent;

    &.active {
      color: black;

      @include feel.legacy {
        &, &:hover, &:focus, &:active {
          border-bottom-color: #d7661c;
        }
      }
      @include feel.modern {
        &, &:hover, &:focus, &:active {
          border-bottom-color: style.$green-500;
        }
      }
    }
  }
}

body.theme-dark {
  .nav-pills {
    border-bottom-color: #2f2f2f;

    .nav-link.active {
      &, &:hover, &:active, &:focus {
        color: #acacac;
      }
    }
  }
}
