@import "../vendor/bootstrap/scss/nav";

// General nav styling
.nav-link {
  display: flex;

  &.dropdown-toggle::after { align-self: center; }
}

// Capsule nav
.nav-capsule {
  @extend %text-md-semibold;

  background-color: $nav-capsule-bg;
  color: $nav-capsule-color;
  border-radius: $nav-capsule-border-radius;

  .nav-link { line-height: $icon-size; }
}

// SDS Tabs
.nav-tabs {
  height: $sds-tabs-height;

  --#{$prefix}nav-link-color: #{$nav-tabs-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-tabs-link-color};

  .nav-link {
    @extend %text-lg-regular;

    height: $sds-tabs-height;
    border: 0;
    position: relative;
    margin-left: map-get($spacers, 2);
    margin-right: map-get($spacers, 2);
    padding-left: map-get($spacers, 2);
    padding-right: map-get($spacers, 2);

    &.active,
    &:hover,
    &:focus {
      &::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-top: $nav-tabs-link-border-size solid $nav-tabs-link-hover-border-color;
        border-radius: $border-radius $border-radius 0 0;
      }
    }

    &.active {
      @extend %text-lg-bold;

      background-color: transparent;
      cursor: text;

      &::after { border-color: $nav-tabs-link-active-border-color; }
    }
  }
}