.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}body-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}; } }