/* Tabs + — i2t3 component styles
 * Richer tabs (vs. the Bootstrap "tab"): style (tabs/pills/underline), position
 * (top/bottom/left/right), optional justified nav and an icon per tab. Tab
 * switching uses the global Bootstrap bundle (no own JS).
 */

.i2t3-tab-plus__content { padding-top: 1rem; }

/* Position: bottom — nav under the content */
.i2t3-tab-plus--pos-bottom .i2t3-tab-plus__wrap { display: flex; flex-direction: column-reverse; }
.i2t3-tab-plus--pos-bottom .i2t3-tab-plus__content { padding-top: 0; padding-bottom: 1rem; }

/* Position: left / right — vertical nav beside the content */
.i2t3-tab-plus--pos-left .i2t3-tab-plus__wrap,
.i2t3-tab-plus--pos-right .i2t3-tab-plus__wrap { display: flex; gap: 1.5rem; align-items: flex-start; }
.i2t3-tab-plus--pos-right .i2t3-tab-plus__wrap { flex-direction: row-reverse; }
.i2t3-tab-plus--pos-left .i2t3-tab-plus__nav,
.i2t3-tab-plus--pos-right .i2t3-tab-plus__nav { flex: 0 0 auto; min-width: 12rem; }
.i2t3-tab-plus--pos-left .i2t3-tab-plus__content,
.i2t3-tab-plus--pos-right .i2t3-tab-plus__content { flex: 1 1 auto; padding-top: 0; }

/* Style: underline fallback (for Bootstrap < 5.3) */
.i2t3-tab-plus--underline .nav-underline { gap: 1rem; }
.i2t3-tab-plus--underline .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.i2t3-tab-plus--underline .nav-link.active {
    border-bottom-color: var(--i2t3-tab-accent, var(--i2t3-primary, #0d6efd));
    color: var(--i2t3-tab-accent, var(--i2t3-primary, #0d6efd));
    background: transparent;
}

/* Pills active state uses the chosen accent */
.i2t3-tab-plus--pills .nav-link.active {
    background-color: var(--i2t3-tab-accent, var(--i2t3-primary, #0d6efd));
}