.tabs {
    position: relative;
    display: grid;
    grid: auto minmax(0, 1fr) / 100%;
    justify-content: start;

    inline-size: 100%;
    block-size: 100%;

    & > header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        border-block-end: 1px solid var(--surface-700);

        & > .handle {
            display: grid;
            grid-auto-flow: column;
            column-gap: var(--padding-m);

            background-color: transparent;
            color: var(--text-2);
            cursor: pointer;
            border-radius: var(--radii-l) var(--radii-l) 0 0;

            & > button {
                display: grid;
                align-content: center;
                background-color: inherit;
                color: inherit;
                padding: var(--padding-l) 0;
                border: none;
                cursor: pointer;
                border-radius: inherit;

                &:first-child {
                    padding-inline-start: var(--padding-xl);
                }

                &:last-child {
                    padding-inline-end: var(--padding-xl);
                }

                &:not(:first-child) {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }

                &:not(:last-child) {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
            }

            &.active {
                background-color: var(--surface-600);
                color: var(--text-1);
            }
        }

        &:empty {
            display: none;
        }
    }

    .tab {
        display: contents;
        background-color: var(--surface-600);
        color: var(--text-1);
    }
}

@property --tab-count {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}