/* Curseur — composant canonique ; son emploi : canon_range.md. */

/* Une règle par moteur : un pseudo-élément qu'un moteur ne connaît pas invaliderait la liste. Le
   curseur mesure --range-thumb-width de large, son centre court de la moitié de sa largeur à
   chaque bout ; parts, crans et cran par défaut se placent sur cette course. Le cran par défaut
   s'interrompt au milieu, où le cran ordinaire le complète ; tous deux tombent sur le pixel. */
@layer components {
    .range {
        display: block;
        width: 100%;
        height: var(--range-height, var(--canon-space-5));
    }
    .range::-webkit-slider-runnable-track {
        height: var(--range-height, var(--canon-space-5));
    }
    .range::-moz-range-track {
        height: var(--range-height, var(--canon-space-5));
    }
    .range::-webkit-slider-thumb {
        width: var(--range-thumb-width, var(--canon-space-4));
        height: var(--range-height, var(--canon-space-5));
    }
    .range::-moz-range-thumb {
        width: var(--range-thumb-width, var(--canon-space-4));
        height: var(--range-height, var(--canon-space-5));
    }
}

@layer components {
    .range {
        appearance: none;
        border-radius: var(--range-radius, var(--canon-radius-control));
        background-color: var(--range-track, var(--canon-theme-tint));
        background-image: linear-gradient(to right, currentColor calc(var(--range-thumb-width, var(--canon-space-4)) / 2 + var(--range-progress, 0) * (100% - var(--range-thumb-width, var(--canon-space-4)))), transparent 0);
    }
    .range:dir(rtl) {
        background-image: linear-gradient(to left, currentColor calc(var(--range-thumb-width, var(--canon-space-4)) / 2 + var(--range-progress, 0) * (100% - var(--range-thumb-width, var(--canon-space-4)))), transparent 0);
    }
    .range::-webkit-slider-thumb {
        appearance: none;
        border: var(--range-thumb-line-width, 0px) solid var(--range-thumb-line, var(--canon-theme-ink));
        border-radius: var(--range-thumb-radius, var(--canon-radius-pill));
        background-color: var(--range-thumb-surface, var(--canon-theme-contrast));
        backdrop-filter: var(--range-thumb-backdrop, none);
    }
    .range::-moz-range-thumb {
        border: var(--range-thumb-line-width, 0px) solid var(--range-thumb-line, var(--canon-theme-ink));
        border-radius: var(--range-thumb-radius, var(--canon-radius-pill));
        background-color: var(--range-thumb-surface, var(--canon-theme-contrast));
        backdrop-filter: var(--range-thumb-backdrop, none);
    }
    .range::-webkit-slider-thumb:hover {
        border-width: var(--range-thumb-line-width-hover, var(--range-thumb-line-width, 0px));
    }
    .range::-moz-range-thumb:hover {
        border-width: var(--range-thumb-line-width-hover, var(--range-thumb-line-width, 0px));
    }
    .range:disabled::-webkit-slider-thumb {
        background-color: var(--canon-theme-canvas);
        background-image: linear-gradient(var(--canon-theme-faint), var(--canon-theme-faint));
    }
    .range:disabled::-moz-range-thumb {
        background-color: var(--canon-theme-canvas);
        background-image: linear-gradient(var(--canon-theme-faint), var(--canon-theme-faint));
    }
    .range--notches::-webkit-slider-runnable-track {
        background-image: linear-gradient(currentColor 3px, transparent 0 6px, currentColor 0),
            repeating-linear-gradient(to right, currentColor 0 3px, transparent 3px calc((100% - 3px) / var(--range-notches, 1)));
        background-position: calc(var(--range-default, -10) * (100% - var(--range-thumb-width, var(--canon-space-4)) + 3px) + var(--range-thumb-width, var(--canon-space-4)) / 2 - 1.5px) calc(50% - 0.5px),
            calc(var(--range-thumb-width, var(--canon-space-4)) / 2 - 1.5px) calc(50% - 0.5px);
        background-size: 3px 9px, calc(100% - var(--range-thumb-width, var(--canon-space-4)) + 3px) 3px;
        background-repeat: no-repeat;
    }
    .range--notches::-moz-range-track {
        background-image: linear-gradient(currentColor 3px, transparent 0 6px, currentColor 0),
            repeating-linear-gradient(to right, currentColor 0 3px, transparent 3px calc((100% - 3px) / var(--range-notches, 1)));
        background-position: calc(var(--range-default, -10) * (100% - var(--range-thumb-width, var(--canon-space-4)) + 3px) + var(--range-thumb-width, var(--canon-space-4)) / 2 - 1.5px) calc(50% - 0.5px),
            calc(var(--range-thumb-width, var(--canon-space-4)) / 2 - 1.5px) calc(50% - 0.5px);
        background-size: 3px 9px, calc(100% - var(--range-thumb-width, var(--canon-space-4)) + 3px) 3px;
        background-repeat: no-repeat;
    }
    .range--notches:dir(rtl)::-webkit-slider-runnable-track {
        background-position: calc((1 - var(--range-default, 11)) * (100% - var(--range-thumb-width, var(--canon-space-4)) + 3px) + var(--range-thumb-width, var(--canon-space-4)) / 2 - 1.5px) calc(50% - 0.5px),
            calc(var(--range-thumb-width, var(--canon-space-4)) / 2 - 1.5px) calc(50% - 0.5px);
    }
    .range--notches:dir(rtl)::-moz-range-track {
        background-position: calc((1 - var(--range-default, 11)) * (100% - var(--range-thumb-width, var(--canon-space-4)) + 3px) + var(--range-thumb-width, var(--canon-space-4)) / 2 - 1.5px) calc(50% - 0.5px),
            calc(var(--range-thumb-width, var(--canon-space-4)) / 2 - 1.5px) calc(50% - 0.5px);
    }
    /* Le contraste forcé retire fonds et dégradés : le curseur rend son dessin au navigateur, qui le
       peint aux couleurs du système. */
    @media (forced-colors: active) {
        .range {
            appearance: auto;
        }
        .range::-webkit-slider-thumb {
            appearance: auto;
        }
    }

    .range {
        color: var(--canon-theme-control-boundary);
    }
    .range:disabled {
        color: var(--canon-theme-disabled);
    }
    .range--notches::-webkit-slider-runnable-track {
        color: color-mix(in srgb, var(--canon-theme-ink) 30%, transparent);
    }
    .range--notches::-moz-range-track {
        color: color-mix(in srgb, var(--canon-theme-ink) 30%, transparent);
    }

    .range:not(:disabled) {
        cursor: pointer;
    }
}

@layer components {
    .range--style-scale {
        background-color: transparent;
        background-image: linear-gradient(to right, var(--range-scale-start, var(--canon-theme-info)), var(--range-scale-middle, var(--canon-theme-pending)) var(--range-scale-middle-offset, 50%), var(--range-scale-end, var(--canon-theme-danger)));
        background-position: center;
        background-size: 100% var(--range-scale-size, 6px);
        background-repeat: no-repeat;
    }
    .range--style-scale:dir(rtl) {
        background-image: linear-gradient(to left, var(--range-scale-start, var(--canon-theme-info)), var(--range-scale-middle, var(--canon-theme-pending)) var(--range-scale-middle-offset, 50%), var(--range-scale-end, var(--canon-theme-danger)));
    }
}

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

@layer components {
    /* La pagination du lexique de l'essai, dans le mode sombre propre à l'essai, que le thème du canon
       ignore : un rail clair, où la part parcourue et le curseur se détachent. */
    [data-essay-dark] .fields-range {
        --range-track: var(--essay-muted);
        --range-thumb-surface: var(--essay-ink);
    }
}