/* https://zagjs.com/components/tabs#styling-guide */

.tabs {
    [data-scope=tabs][data-part=list] {
        background: var(--color-definition-white);
        border-width: 0;
        border-bottom-width: 1px;
        border-color: var(--color-definition-grey);
        border-style: solid;
    }

    [data-scope=tabs][data-part="trigger"] {
        -webkit-appearance: button;
        background-color: transparent;
        background-image: none;
        border: 0 solid;
        border-color: transparent;
        border-bottom-width: 3px;
        cursor: pointer;
        display: inline-flex;
        flex-shrink: 0;
        user-select: none;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--color-definition-grey);
    }

    [data-scope=tabs][data-part="trigger"][data-selected] {
        color: var(--color-accent);
        border-color: var(--color-accent);
    }

    [data-scope=tabs][data-part="content"][data-selected] {
        /* Styles for selected tab */
    }


    [data-scope=tabs][data-part="trigger"][data-disabled] {
        /* Styles for disabled tab */
    }


    [data-scope=tabs][data-part="trigger"]:focus {
        /* Styles for focused tab */
    }
    [data-scope=tabs][data-part="list"][data-focus] {
        /* Styles for when any tab is focused */
    }
}