ba-web-components/src/components/tabs/tabs.css

:host {
    /* Light Mode Variables */
    --tabs-bottom-border-colour__light: #E2E8F0;
    --tabs-tab-title-colour__light: #64748B;
    --tabs-tab-title-hover-colour__light: #0F172A;
    --tabs-tab-title-hover-background-colour__light: #F1F5F9;
    --tabs-tab-title-focus-colour__light: #0EA5E9;
    --tabs-tab-title-active-colour__light: #0EA5E9;
    --tabs-tab-title-active-border-colour__light: #0EA5E9;
    --tabs-filled-background-colour__light: #F1F5F9;
    --tabs-filled-tab-hover-background-colour__light: #E2E8F0;
    --tabs-filled-tab-active-background-colour__light: #FFFFFF;

    /* Dark Mode Variables */
    --tabs-bottom-border-colour__dark: #334155;
    --tabs-tab-title-colour__dark: #94A3B8;
    --tabs-tab-title-hover-colour__dark: #F8FAFC;
    --tabs-tab-title-hover-background-colour__dark: #1E293B;
    --tabs-tab-title-focus-colour__dark: #0EA5E9;
    --tabs-tab-title-active-colour__dark: #0EA5E9;
    --tabs-tab-title-active-border-colour__dark: #0EA5E9;
    --tabs-filled-background-colour__dark: #1E293B;
    --tabs-filled-tab-hover-background-colour__dark: #334155;
    --tabs-filled-tab-active-background-colour__dark: #0F172A;
}

:where(ba-tabs) {
    display: block;
    min-width: 100%;
    max-width: 100%;
}

:where(ba-tablist) {
    display: block;
    min-width: 100%;
    max-width: 100%;
}

/*  ======================================
    TABLIST CONTAINER (<nav class="tabs">)
    ====================================== */
:where(.tabs) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid light-dark(var(--tabs-bottom-border-colour__light), var(--tabs-bottom-border-colour__dark)); /* Default bottom track */
    margin-bottom: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
}

/*  =========================================
    TAB BUTTONS (<button class="tabs-title">)
    ========================================= */
:where(.tabs) button.tabs-title {
    background: transparent;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: light-dark(var(--tabs-tab-title-colour__light), var(--tabs-tab-title-colour__dark));
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: -2px; /* Pull down to overlap the container's bottom border */
    transition: all 0.2s ease;

    /* Hover State */
    &:hover {
        color: light-dark(var(--tabs-tab-title-hover-colour__light), var(--tabs-tab-title-hover-colour__dark));
        background-color: light-dark(var(--tabs-tab-title-hover-background-colour__light), var(--tabs-tab-title-hover-background-colour__dark));
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    /* Keyboard Focus (Accessibility) */
    &:focus-visible {
        outline: 2px solid light-dark(var(--primary-background-color, var(--tabs-tab-title-focus-colour__light)), var(--primary-background-color, var(--tabs-tab-title-focus-colour__dark)));
        outline-offset: -2px;
        border-radius: 6px;
    }

    /* Active/Selected State */
    &[aria-selected="true"],
    &.is-active {
        color: light-dark(var(--primary-background-color, var(--tabs-tab-title-active-colour__light)), var(--primary-background-color, var(--tabs-tab-title-active-colour__dark)));
        border-bottom-color: light-dark(var(--primary-background-color, var(--tabs-tab-title-active-border-colour__light)), var(--primary-background-color, var(--tabs-tab-title-active-border-colour__dark)));
    }
}

/*  ========================================
    VARIANTS (Optional classes added to nav)
    ======================================== */

/* -------------------------------------------------------------------------------
    Underline (Bottom border / "underline" tab style)
    ------------------------------------------------------------------------------- */

:where(.tabs.underline) button.tabs-title {
    border-bottom: 3px solid transparent; /* Placeholder for the active underline */

    /* Active/Selected State */
    &[aria-selected="true"],
    &.is-active {
        border-bottom-color: light-dark(var(--primary-background-color, var(--tabs-tab-title-active-border-colour__light)), var(--primary-background-color, var(--tabs-tab-title-active-border-colour__dark)));
    }
}

/*  -------------------------------------------------------------------------------
    Filled (Non-transparent "filled" tab style with background and rounded corners)
    ------------------------------------------------------------------------------- */

/* Filled Variant: <nav class="tabs filled"> */
:where(.tabs.filled) {
    border-bottom: none;
    background-color: light-dark(var(--tabs-filled-background-colour__light), var(--tabs-filled-background-colour__dark));
    border-radius: 8px;
    padding: 0.5rem;
    width: fit-content;

    button.tabs-title {
        border: none;
        margin-bottom: 0;
        border-radius: 6px;

        &:hover {
            background-color: light-dark(var(--tabs-filled-tab-hover-background-colour__light), var(--tabs-filled-tab-hover-background-colour__dark));
        }

        &[aria-selected="true"],
        &.is-active {
            background-color: light-dark(var(--tabs-filled-tab-active-background-colour__light), var(--tabs-filled-tab-active-background-colour__dark));
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            color: light-dark(var(--primary-background-colour, var(--tabs-tab-title-active-colour__light)), var(--primary-background-color, var(--tabs-tab-title-active-colour__dark)));
        }
    }
}

:where(ba-tab-panels) {
    display: block;
    min-width: 100%;
    max-width: 100%;
}

/* =====================================
   TAB PANELS (<div class="tabs-panel">)
   ===================================== */
.tabs-panel {
    display: none; /* Hidden by default */
}

.tabs-panel.is-active {
    display: block; /* Shown when JS adds .is-active */
    animation: fadeInTab 0.3s ease-in-out forwards;
}

/* =========
   KEYFRAMES
   ========= */
@keyframes fadeInTab {
    from { 
        opacity: 0; 
        transform: translateY(5px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}