.nav-tabs,
.nav-pills {
  display: flex;
  position: relative;
  margin-bottom: $spacing;
  overflow-x: scroll;
  overflow-y: hidden;
  user-select: none;
}

.nav-tabs {
  border-bottom: $border-width solid $border-color;
}

.nav-tabs::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: $spacing;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
}

.nav-tabs::-webkit-scrollbar,
.nav-pills::-webkit-scrollbar,
.nav-tabs .navlinks::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.nav-tabs .navlink, 
.nav-tabs .nav-link {
  display: inline-flex;
  align-items: flex-start;
  white-space: nowrap;
  margin-bottom: -1px;
  margin-right: $spacing-md;
  height: $spacer;
  color: $primary;
  font-size: $font-size-h5;
  font-weight: $font-weight-light;
  line-height: 1;
  border-radius: 0;
  cursor: pointer;
  border-bottom: 1px solid $link-hover-color;
  user-select: none;

  &.active {
    border-bottom: 4px solid $info;
  }

  &:hover, &:focus {
    color: $link-hover-color;
    border-bottom: 4px solid $link-hover-color;
  }

  &.disabled, &.disabled:hover, &.disabled:focus {
    color: $disabled;
    cursor: not-allowed;
    border-bottom: none;
  } 

  &:last-child {
    margin-right: 0;
  }
}

.nav-tabs .counter {
  margin-left: $spacing-xxs;
  margin-right: 0;
  font-size: $font-size-sm;
}

.nav-tabs:has(.nav-actions) {
  display: grid;
  grid-template-columns: 1fr auto;
} 

.nav-tabs:has(.nav-actions) .navlinks {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  padding-right: $spacing;
} 

.nav-tabs:has(.nav-actions)::after  {
  content: none;
} 

.nav-tabs:has(.nav-actions) .nav-actions::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -$spacing;
  height: 100%;
  width: $spacing;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
}

.nav-tabs .nav-actions {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-items: end;
  align-self: end;
  margin-left: auto;
  white-space: nowrap;
  bottom: $spacing-xxs;
}

.nav-tabs .nav-actions .link-with-icon,
.nav-tabs .nav-actions .linked-icon {
  margin-left: $spacing-sm;
}


//////// Nav pills ////////

.nav-pills {
  display: flex;
  position: relative;
  margin-bottom: $spacing-md;
  overflow-x: scroll;
  overflow-y: hidden;
}

.nav-pills button {
  appearance: none;
}

.nav-pills .navlink {
  display: inline-flex;
  flex-shrink: 0;
  align-items: flex-start;
  white-space: nowrap;
  margin-right: $spacing-xxs;
  padding: $spacing-xxs $spacing-sm;
  background-color: $gray-lighter;
  border-radius: $border-radius;
  cursor: pointer;
  user-select: none;
  &.active {
    color: $white;
    background-color: $info;
  }

  &:hover, &:focus {
    color: $white;
    background-color: $link-hover-color;
  }

  &.disabled, &.disabled:hover, &.disabled:focus {
    color: $disabled;
    cursor: not-allowed;
  } 

  &:last-child {
    margin-right: 0;
  }

  &.disabled {
    color: $disabled;
    background-color: transparent;
    background-image: url("@images/pattern-stripes-gray.png");
    background-repeat: repeat;
  }
}

.nav-pills .counter {
  margin-left: $spacing-xxs;
  margin-right: 0;
}