/* Base  */
.carousel {
    scroll-behavior: smooth;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    anchor-name: --carousel;
    display: flex;
    /* grid-auto-flow: column; */
    /* grid-auto-columns: 25rem; */
    gap: 2rem;





    >.carousel__slide {
        scroll-snap-align: center;
    }
}

/* Buttons  */
.carousel--scroll-buttons {
    &::scroll-button(*) {
        position: fixed;
        position-anchor: --carousel;
        position-visibility: always;
    }

    &::scroll-button(right) {
        position-area: inline-end block-end;
        content: '>' / 'Next';
        transform: translate(-40px, 10px);
    }

    &::scroll-button(left) {
        position-area: inline-start block-end;
        content: '<' / 'Previous';
        transform: translate(40px, 10px);
    }
}

/* Markers  */
.carousel--scroll-markers {
    scroll-marker-group: after;

    &::scroll-marker-group {
        position: fixed;
        position-anchor: --carousel;
        position-area: block-end;
        position-visibility: always;
        margin: 10px;
        display: grid;
        grid-auto-columns: 20px;
        grid-auto-flow: column;
        gap: 10px;
    }

    >.carousel__slide {
        &::scroll-marker {
            content: '' / attr(data-label);
            background: var(--c-g-10);
            min-height: 10px;
            border-radius: 9999px;
        }

        &::scroll-marker:target-current {
            background: var(--c-accent);
        }
    }
}

/* Inert  */
.carousel--inert {
    >.carousel__slide {
        container-type: scroll-state;
        flex: 25rem 0 1;
        min-inline-size: min(25rem, 100%);















































        >.card {
            @container not scroll-state(snapped) {
                interactivity: inert;
                opacity: .25;
            }
        }
    }
}