@use "../bootstrap" as bs;
@use "../tokens" as *;

.nav-tabs {
  border-radius: bs.$nav-tabs-border-radius;
  padding: $nav-tabs-padding;
  box-shadow: $nav-tabs-box-shadow;

  .nav-item {

    .count {
      font-weight: 300;
    }

    & ~ .nav-item {
      margin-left: $nav-tabs-padding;
    }
  }

  .nav-link {
    border-bottom-left-radius: bs.$nav-tabs-border-radius;
    border-bottom-right-radius: bs.$nav-tabs-border-radius;

    &.active {
      box-shadow: $nav-tabs-link-active-box-shadow;
    }

    &.active:hover {
      background-color: $nav-link-active-hover-bg;
    }

    &:hover {
      background-color: $nav-link-hover-bg;
    }
  }
}