/* Carrousel — modèle canonique ; son emploi : canon_carousel.md. */

@layer components {
    .carousel {
        display: flex;
        flex-direction: column;
        gap: var(--carousel-space, var(--canon-space-3));
    }
    .carousel-slides {
        position: relative;
        display: grid;
        grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    }
    .carousel-slide {
        grid-area: 1 / 1;
        min-width: 0;
    }
    .carousel-controls {
        display: flex;
        align-items: center;
        justify-content: var(--carousel-controls-justify, center);
        gap: var(--carousel-space, var(--canon-space-3));
    }
    .carousel-previous,
    .carousel-next,
    .carousel-play {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: var(--carousel-control-size, var(--canon-size-icon-target));
        height: var(--carousel-control-size, var(--canon-size-icon-target));
        padding: 0;
    }
    .carousel-play {
        width: var(--carousel-play-size, var(--carousel-control-size, var(--canon-size-icon-target)));
        height: var(--carousel-play-size, var(--carousel-control-size, var(--canon-size-icon-target)));
    }
    .carousel-previous svg,
    .carousel-next svg {
        display: block;
        width: 1em;
        height: 1em;
    }
    .carousel-play::before {
        width: 0.6em;
        aspect-ratio: 1;
    }
    .carousel-dots {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: var(--carousel-dots-padding, 0);
    }
    .carousel-dot {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 4px;
    }
    .carousel-dot::before {
        width: var(--carousel-dot-size, 8px);
        height: var(--carousel-dot-size, 8px);
    }
    .carousel-dot[aria-current="true"]::before {
        width: var(--carousel-dot-current-width, var(--carousel-dot-size, 8px));
        scale: var(--carousel-dot-current-scale, 1);
    }
    .carousel-dot[data-carousel-dot-bound]::before {
        scale: var(--carousel-dot-edge-scale, 0.6);
    }
    [data-carousel-play-duration] .carousel-dot[aria-current="true"]::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--carousel-dot-current-width, var(--carousel-dot-size, 8px));
        height: var(--carousel-dot-size, 8px);
        translate: -50% -50%;
        scale: var(--carousel-dot-current-scale, 1);
    }
    .carousel--side,
    .carousel--side-wide {
        position: relative;
    }
    .carousel--side .carousel-previous,
    .carousel--side .carousel-next {
        position: absolute;
        top: 50%;
        z-index: 1;
        transform: translateY(calc(-50% - (var(--carousel-control-size, var(--canon-size-icon-target)) + var(--carousel-space, var(--canon-space-3))) / 2));
    }
    .carousel--side .carousel-previous {
        inset-inline-start: 0;
    }
    .carousel--side .carousel-next {
        inset-inline-end: 0;
    }
    [data-carousel-layout="track"] > .carousel-slides {
        display: flex;
        gap: var(--carousel-slide-space, var(--canon-space-3));
        padding-inline: var(--carousel-track-padding, 0);
        scroll-padding-inline: var(--carousel-track-padding, 0);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    [data-carousel-layout="track"] > .carousel-slides::-webkit-scrollbar {
        display: none;
    }
    [data-carousel-layout="track"] > .carousel-slides > .carousel-slide {
        flex: 0 0 var(--carousel-slide-size, 100%);
        scroll-snap-align: var(--carousel-slide-align, start);
    }
    .carousel-previous:hover,
    .carousel-next:hover,
    .carousel-play:hover {
        scale: var(--carousel-control-scale-hover, 1);
    }
    .carousel-previous:active,
    .carousel-next:active,
    .carousel-play:active {
        scale: var(--carousel-control-scale-active, 1);
    }
    .carousel-previous[aria-disabled="true"],
    .carousel-next[aria-disabled="true"] {
        scale: 1;
    }
    @media (width > 800px) {
        .carousel--side-wide .carousel-previous,
        .carousel--side-wide .carousel-next {
            position: absolute;
            top: 50%;
            z-index: 1;
            transform: translateY(calc(-50% - (var(--carousel-control-size, var(--canon-size-icon-target)) + var(--carousel-space, var(--canon-space-3))) / 2));
        }
        .carousel--side-wide .carousel-previous {
            inset-inline-start: 0;
        }
        .carousel--side-wide .carousel-next {
            inset-inline-end: 0;
        }
    }

    .carousel-slide[hidden] {
        opacity: 0;
    }
    .carousel-previous,
    .carousel-next,
    .carousel-play {
        border: var(--canon-line-width) solid var(--carousel-control-line, var(--canon-theme-line));
        border-radius: var(--canon-radius-pill);
        background-color: var(--carousel-control-surface, var(--canon-theme-raised));
    }
    .carousel-play::before {
        background-color: currentColor;
        clip-path: polygon(10% 0, 38% 0, 38% 100%, 10% 100%, 10% 0, 62% 0, 90% 0, 90% 100%, 62% 100%, 62% 0);
    }
    .carousel-play[aria-pressed="false"]::before {
        clip-path: polygon(18% 0, 95% 50%, 18% 100%);
    }
    .carousel-play[data-carousel-play="ended"]::before {
        clip-path: polygon(80% 15%, 90% 27%, 95% 42%, 95% 58%, 90% 73%, 80% 85%, 66% 93%, 50% 96%, 34% 93%, 20% 85%, 10% 73%, 5% 58%, 5% 42%, 10% 27%, 20% 15%, 31% 27%, 24% 35%, 20% 45%, 20% 55%, 24% 65%, 31% 73%, 40% 78%, 50% 80%, 60% 78%, 69% 73%, 76% 65%, 80% 55%, 80% 45%, 76% 35%, 69% 27%, 64% 33%, 51% 12%, 85% 9%);
    }
    .carousel-dots {
        border-radius: var(--canon-radius-pill);
        background-color: var(--carousel-dots-surface, transparent);
    }
    .carousel-dot {
        border: 0;
        background-color: transparent;
    }
    .carousel-dot::before {
        border-radius: var(--canon-radius-pill);
        background-color: var(--carousel-dot-color, var(--canon-theme-faint));
    }
    .carousel-dot:hover::before {
        background-color: var(--carousel-dot-hover, var(--canon-theme-muted));
    }
    .carousel-dot[aria-current="true"]::before {
        background-color: var(--carousel-dot-current, var(--canon-theme-action));
    }
    [data-carousel-play-duration] .carousel-dot[aria-current="true"]::before {
        background-color: var(--carousel-dot-track, var(--carousel-dot-color, var(--canon-theme-faint)));
    }
    [data-carousel-play-duration] .carousel-dot[aria-current="true"]::after {
        border-radius: var(--canon-radius-pill);
        background-color: var(--carousel-dot-current, var(--canon-theme-action));
    }
    [data-carousel-layout="track"] > .carousel-slides {
        scrollbar-width: none;
    }
    [data-carousel-layout="track"] > .carousel-slides > .carousel-slide:not([data-carousel-current]) {
        opacity: var(--carousel-slide-opacity, 1);
    }
    .carousel-previous:hover,
    .carousel-next:hover,
    .carousel-play:hover {
        border-color: var(--carousel-control-line-hover, var(--canon-theme-line-hover));
        background-color: var(--carousel-control-surface-hover, var(--canon-theme-highlight));
    }
    .carousel-previous[aria-disabled="true"],
    .carousel-next[aria-disabled="true"] {
        border-color: var(--carousel-control-line, var(--canon-theme-line));
        background-color: var(--carousel-control-surface, var(--canon-theme-raised));
        opacity: var(--carousel-control-disabled-opacity, 0.4);
    }
    @starting-style {
        .carousel-slide:not([hidden]) {
            opacity: 0;
        }
    }

    .carousel-previous,
    .carousel-next,
    .carousel-play {
        font: inherit;
        font-size: var(--carousel-arrow-size, 1.25em);
        line-height: 1;
        color: var(--carousel-control-ink, var(--canon-theme-ink));
    }
    .carousel-play::before,
    .carousel-dot::before {
        content: "";
    }
    [data-carousel-play-duration] .carousel-dot[aria-current="true"]::after {
        content: "";
    }

    .carousel-slides {
        touch-action: pan-y pinch-zoom;
    }
    .carousel-slide {
        transition: opacity var(--carousel-transition-duration, var(--canon-duration-reveal)) var(--carousel-transition-curve, ease-out), display var(--carousel-transition-duration, var(--canon-duration-reveal)) allow-discrete;
    }
    .carousel-slide[hidden] {
        pointer-events: none;
    }
    .carousel-previous,
    .carousel-next,
    .carousel-play,
    .carousel-dot {
        cursor: pointer;
    }
    .carousel-previous,
    .carousel-next,
    .carousel-play {
        transition: border-color var(--canon-duration-state), background-color var(--canon-duration-state), scale var(--canon-duration-state);
    }
    .carousel-dot::before {
        transition: width var(--canon-duration-state), scale var(--canon-duration-state), background-color var(--canon-duration-state);
    }
    [data-carousel-play-duration] .carousel-dot[aria-current="true"]::after {
        animation: carousel-progress var(--carousel-play-duration, 0ms) linear forwards;
    }
    [data-carousel-paused] .carousel-dot[aria-current="true"]::after {
        animation-play-state: paused;
    }
    [data-carousel-layout="track"] > .carousel-slides {
        overscroll-behavior-x: contain;
        touch-action: auto;
    }
    [data-carousel-layout="track"] > .carousel-slides > .carousel-slide {
        transition: opacity var(--canon-duration-reveal);
    }
    .carousel-previous[aria-disabled="true"],
    .carousel-next[aria-disabled="true"] {
        cursor: default;
    }
    @media (prefers-reduced-motion: reduce) {
        .carousel-slide,
        [data-carousel-layout="track"] > .carousel-slides > .carousel-slide,
        .carousel-dot::before {
            transition: none;
        }
        [data-carousel-play-duration] .carousel-dot[aria-current="true"]::after {
            animation: none;
        }
    }
    @keyframes carousel-progress {
        from {
            clip-path: inset(0 100% 0 0 round var(--canon-radius-pill));
        }
        to {
            clip-path: inset(0 0 0 0 round var(--canon-radius-pill));
        }
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer components {
    .listing-card-carousel {
        --carousel-space: 4px;
        --carousel-control-size: 24px;
        --carousel-control-surface: var(--raw-color-white-90);
        --carousel-dot-color: rgb(0 0 0 / 0.2);
        --carousel-dot-current: var(--local-color-identity-action);
    }
    .plates {
        --carousel-space: 16px;
        --carousel-control-size: 32px;
        --carousel-control-surface: var(--raw-color-white-90);
        --carousel-arrow-size: var(--raw-size-13);
        --carousel-dot-size: 10px;
        --carousel-dot-color: rgb(0 0 0 / 0.2);
        --carousel-dot-current: var(--local-color-identity-action);
    }
    /* Le carrousel des figurines de l'accueil : les séries fondent en 1000 ms, comme leurs lumières, et
       leurs vues en 800 ms ; ses commandes, posées sur l'image, sont des îlots sombres. */
    .showcase {
        --carousel-transition-duration: 1000ms;
        --carousel-transition-curve: ease;
    }
    .showcase-figures {
        --carousel-transition-duration: 800ms;
    }
    .showcase-controls[data-theme="noxus"] {
        --carousel-control-size: 50px;
        --carousel-play-size: 32px;
        --carousel-arrow-size: 22px;
        --carousel-control-surface: var(--local-color-decor-home-showcase-arrow-surface);
        --carousel-control-surface-hover: var(--local-color-decor-home-showcase-arrow-hover-surface);
        --carousel-control-line: var(--local-color-decor-home-showcase-arrow-line);
        --carousel-control-line-hover: var(--local-color-decor-home-showcase-arrow-hover-line);
        --carousel-control-ink: var(--local-color-decor-home-icon-line);
        --carousel-control-scale-hover: 1.06;
        --carousel-control-scale-active: 0.95;
        --carousel-dot-size: 8px;
        --carousel-dot-current-width: 44px;
        --carousel-dot-color: var(--local-color-decor-home-showcase-dot-surface-2);
        --carousel-dot-hover: var(--local-color-decor-home-showcase-dot-hover-surface);
        --carousel-dot-track: var(--local-color-decor-home-showcase-dot-surface-3);
        --carousel-dot-current: var(--local-color-decor-home-showcase-dot-surface);
    }
    .showcase-views-controls[data-theme="noxus"] {
        --carousel-dot-size: 6px;
        --carousel-dot-current-scale: 1.4;
        --carousel-dot-color: var(--local-color-decor-home-showcase-dot-surface-2);
        --carousel-dot-hover: var(--local-color-decor-home-showcase-dot-hover-surface);
        --carousel-dot-track: var(--local-color-decor-home-showcase-indicator-surface);
        --carousel-dot-current: var(--local-color-decor-home-showcase-indicator-surface);
    }
    @media (max-width: 800px) {
        .showcase-controls[data-theme="noxus"] {
            --carousel-control-size: 40px;
            --carousel-arrow-size: 18px;
        }
    }
    @media (max-width: 600px) {
        .plates {
            --carousel-control-size: 24px;
            --carousel-arrow-size: var(--raw-size-09);
            --carousel-dot-size: 8px;
        }
    }
}