/* File: Content/PageBuilder/components/tabbed-content/tabbed-content.css */

/* =========================================================
   Tabbed Content (builder/canvas)
   Scope stays STRICTLY inside the pb-block-body wrapper.
   Uses Bootstrap vars, but falls back to SB tokens reliably.
   ========================================================= */

/* Fallback tokens (when bootstrap vars are weird or not applied yet) */
.pb-block-body[data-comp-type="tabbed-content"] {
    --sb-tc-bg: var(--bs-body-bg, var(--sb-surface));
    --sb-tc-fg: var(--bs-body-color, var(--sb-text));
    --sb-tc-muted: var(--bs-secondary-color, var(--sb-text-muted));
    --sb-tc-border: var(--bs-border-color, var(--sb-border));
    --sb-tc-surface: var(--sb-surface);
    --sb-tc-surface2: var(--sb-surface-2);
}

/* Keep colors readable in both light/dark, and when "system" wasn't applied yet */
.pb-block-body[data-comp-type="tabbed-content"] .nav-tabs .nav-link,
.pb-block-body[data-comp-type="tabbed-content"] .nav-pills .nav-link {
    color: var(--sb-tc-fg);
}

/* Hover reads better in dark mode */
.pb-block-body[data-comp-type="tabbed-content"] .nav-tabs .nav-link:hover,
.pb-block-body[data-comp-type="tabbed-content"] .nav-pills .nav-link:hover {
    color: var(--sb-tc-fg);
    background: color-mix(in srgb, var(--sb-tc-surface2) 70%, transparent);
}

/* Active state: crisp + token-driven */
.pb-block-body[data-comp-type="tabbed-content"] .nav-tabs .nav-link.active,
.pb-block-body[data-comp-type="tabbed-content"] .nav-pills .nav-link.active {
    color: var(--bs-emphasis-color, var(--sb-tc-fg)) !important;
    background-color: var(--sb-tc-bg) !important;
}

/* Tabs border tokens (Bootstrap tabs rely on borders) */
.pb-block-body[data-comp-type="tabbed-content"] .nav-tabs .nav-link.active {
    border-color: var(--sb-tc-border) !important;
}

/* ---------- Scroll shell + horizontal tab list ---------- */

.pb-block-body[data-comp-type="tabbed-content"] .sb-tabs-shell {
    /* wrapper created by JS around the <ul data-nav> */
    margin-bottom: 0.5rem;
}

/* The nav itself becomes horizontally scrollable when enabled */
.pb-block-body[data-comp-type="tabbed-content"] .sb-tabs-nav {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; /* tiny space so focus ring isn't clipped */
}

/* Hide scrollbar (WebKit) */
.pb-block-body[data-comp-type="tabbed-content"] .sb-tabs-nav::-webkit-scrollbar {
    height: 0;
}

/* Keep tab buttons from wrapping when lots of tabs */
.pb-block-body[data-comp-type="tabbed-content"] .sb-tabs-nav .nav-item {
    flex: 0 0 auto;
}

.pb-block-body[data-comp-type="tabbed-content"] .sb-tabs-nav .nav-link {
    white-space: nowrap;
}

/* Scroll buttons */
.pb-block-body[data-comp-type="tabbed-content"] .sb-tabs-scroll-btn {
    line-height: 1;
    padding: 0.25rem 0.55rem;
    border-radius: 0.65rem;

    background: var(--sb-tc-surface2);
    color: var(--sb-tc-fg);
    border: 1px solid var(--sb-tc-border);
}

.pb-block-body[data-comp-type="tabbed-content"] .sb-tabs-scroll-btn:hover {
    filter: brightness(1.05);
}

/* Make scroll buttons feel less bulky on small screens */
@media (max-width: 576px) {
    .pb-block-body[data-comp-type="tabbed-content"] .sb-tabs-scroll-btn {
        padding: 0.2rem 0.45rem;
    }
}

/* ---------- Pane padding / border niceties ---------- */

/* Pane content should match theme tokens too */
.pb-block-body[data-comp-type="tabbed-content"] [data-panels] {
    background-color: var(--sb-tc-bg);
    color: var(--sb-tc-fg);

    border: 1px solid var(--sb-tc-border);
    border-radius: 0.75rem;
    padding: .75rem;
}

/* If using tabs (not pills), visually attach the active tab to the panel border */
.pb-block-body[data-comp-type="tabbed-content"] .nav-tabs + [data-panels] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Prevent “double border” look when JS border is enabled */
.pb-block-body[data-comp-type="tabbed-content"] .nav-tabs {
    border-bottom-color: var(--sb-tc-border);
}

/* Fade support: Bootstrap uses opacity transition on .fade */
.pb-block-body[data-comp-type="tabbed-content"] .tab-pane.fade {
    transition: opacity 0.15s linear;
}