/* Indux Slides */

@layer components {

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

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

        /* Previous & next buttons */
        & 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)
            }
        }

        & button[\@click="prev()"] {
            left: calc(var(--spacing) * 4)
        }

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

        /* Dots container */
        .carousel-dots {
            position: absolute;
            bottom: calc(var(--spacing) * 4);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: calc(var(--spacing) * 2);
            max-width: 100%;
            padding: 0 calc(var(--spacing) * 4);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;

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

            /* Dot button */
            & 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
                }
            }
        }
    }
}