.nav {
  --#{$prefix}nav-link-color: #{$nav-link-color};
}

.nav-link {
  --#{$prefix}nav-link-hover-bg: #{$nav-link-hover-bg};
}

.nav-tabs {
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};

  .nav-link {
    --#{$prefix}nav-link-hover-bg: #{$nav-link-hover-bg};

    margin-right: 2px;
    &:hover {
      background-color: var(--#{$prefix}nav-link-hover-bg);
    }
  }
}

.tab-content {
  --#{$prefix}nav-tabs-tab-content-bg: #{$nav-tabs-tab-content-bg};

  > .active {
    box-sizing: border-box;
    padding: 12px 17px;
    color: var(--#{$prefix}text-color);
    background: var(--#{$prefix}nav-tabs-tab-content-bg);
    margin-bottom: $spacer * 1.5;
    position: relative;
  }
}

.nav-pills {
  --#{$prefix}nav-pills-link-bg: #{$nav-pills-link-bg};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

  .nav-link {
    margin: 2px 0;
    background: var(--#{$prefix}nav-pills-link-bg);
  }
}

[data-bs-theme='dark'] {
  .nav {
    --#{$prefix}nav-link-color: #{$nav-link-color-dark};
  }

  .nav-link {
    --#{$prefix}nav-link-hover-bg: #{$nav-link-hover-bg-dark};
  }

  .nav-tabs {
    --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color-dark};
    --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg-dark};
  }

  .nav-pills {
    --#{$prefix}nav-pills-link-bg: #{$nav-pills-link-bg-dark};
    --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color-dark};
  }

  .tab-content {
    --#{$prefix}nav-tabs-tab-content-bg: #{$nav-tabs-tab-content-bg-dark};
  }
}