.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);
            }
        }
    }

    .tab {
        position: absolute;
        grid-area: 2 / 1 / span 1 / span 1;
        inline-size: 100%;
        block-size: 100%;

        &:not(.active) {
            display: none;
        }

        & > summary {
            grid-row: 1 / 1;

            padding: var(--padding-s) var(--padding-m);

            &::marker {
                content: none;
            }
        }

        &::details-content {
            grid-area: 2 / 1 / span 1 / span var(--tab-count);
            display: none;
            grid: 100% / 100%;
            inline-size: 100%;
            block-size: 100%;

            overflow: auto;
        }

        &[open] {
            & > summary {
                background-color: var(--surface-600);
            }

            &::details-content {
                display: grid;
            }
        }
    }
}

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