
// Tabbable tabs
// used by react-bootstrap Tabs (which shouldn't be used).
// -------------------------

// Hide tabbable panes to start, show them when `.active`
// @deprecated
.tab-content {
    > .tab-pane {
        display: none;
    }
    > .active {
        display: block;
    }
}

// copied from bootstrap to add some customization vars
.app .nav-underline {
    // scss-docs-start nav-underline-css-vars
    --#{$prefix}nav-underline-link-active-font-weight: #{$nav-underline-link-active-font-weight};
    --#{$prefix}nav-underline-border-active-color: #{$nav-underline-border-active-color};
    // scss-docs-end nav-underline-css-vars

    .nav-link {
        padding-left: map-get($spacers, 2);
        padding-right: map-get($spacers, 2);
    }

    .nav-link.active,
    .show > .nav-link {
        font-weight: var(--#{$prefix}nav-underline-link-active-font-weight); // their is no ver in bootstrap for that
        color: var(--#{$prefix}nav-underline-link-active-color);
        border-bottom-color: var(--#{$prefix}nav-underline-border-active-color); // their is no ver in bootstrap for that
    }
}
