.#{$prefix}nav-tabs {

margin-bottom: 24px;

.#{$prefix}nav {
  &-item {
    margin: 8px 0;
  }

  &-link {
    position: relative;
    padding: 8px 16px;
    color: $slate;
    border: none;
    @include border-radius(4px);

    &:hover {
      color: $dark;
    }

    &.active {
      font-weight: 500;
      &::after {
        position: absolute;
        bottom: -9px;
        left: 0;
        width: 100%;
        height: 4px;
        content: "";
        background-color: $dark;
        border-radius: 2px 2px 0 0; // stylelint-disable-line property-blacklist
      }
    }

    @each $color, $hex in $theme-colors {
      &.active {
        &.theme-#{$color} {
          &::after {
            background-color: #{$hex};
          }
        }
      }
    }

    &.disabled {
      color: $muted;
      pointer-events: auto;
      cursor: not-allowed;
    }
  }
}

.#{$prefix}dropdown-menu {
  margin-top: 11px;
  @include border-radius(4px);

  .#{$prefix}dropdown-item {
    &.active {
      color: inherit;
      background-color: inherit;
    }
  }
}

}