/* Manifest Slides */

@layer base, components, utilities;

@layer components {

    :where([x-carousel]) {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;

        /* Slides container */
        :where(.carousel-slides) {
            display: flex;
            transition: transform 300ms ease-in-out;
            width: 100%;
            aspect-ratio: 16 / 9
        }

        /* Previous & next buttons. Arrow markup is author-written; the
           @click="prev()" selectors are deprecated aliases for the hooks. */
        & :where([data-carousel-prev], [data-carousel-next], button[\@click="prev()"], button[\@click="next()"]) {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: oklch(100% 0 0 / 0.15);

            &:hover {
                background-color: oklch(100% 0 0 / 0.3)
            }
        }

        & :where([data-carousel-prev], button[\@click="prev()"]) {
            left: calc(var(--spacing, 0.25rem) * 4)
        }

        & :where([data-carousel-next], button[\@click="next()"]) {
            left: auto;
            right: calc(var(--spacing, 0.25rem) * 4)
        }

        /* Dots container (author markup, driven by the plugin's `dots` getter) */
        :where(.carousel-dots) {
            position: absolute;
            bottom: calc(var(--spacing, 0.25rem) * 4);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: calc(var(--spacing, 0.25rem) * 2);
            max-width: 100%;
            padding: 0 calc(var(--spacing, 0.25rem) * 4);
            overflow-x: auto;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none
            }

            /* Dot button */
            & :where(span) {
                flex-shrink: 0;
                width: 0.625rem;
                height: 0.625rem;
                border-radius: 50%;
                background-color: oklch(100% 0 0 / 0.15);
                cursor: pointer;
                transition: background-color 300ms ease-in-out;

                &:hover {
                    background-color: oklch(100% 0 0 / 0.3)
                }

                &.active {
                    background-color: white
                }
            }
        }
    }
}