/* Curseur : piste fine du filet du champ, pastille de la couleur du bouton, halo discret au survol. */
input[type='range'] {
    width: 100%;
    height: var(--tap-size);
    background: none;
    appearance: none;
    cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
    height: 0.25rem;
    border-radius: var(--radius-pill);
    background-color: var(--field-line);
}

input[type='range']::-moz-range-track {
    height: 0.25rem;
    border-radius: var(--radius-pill);
    background-color: var(--field-line);
}

input[type='range']::-webkit-slider-thumb {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -0.625rem;
    border: 0;
    border-radius: 50%;
    background-color: var(--btn-bg);
    box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--btn-bg) 18%, transparent);
    appearance: none;
    transition: scale 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

input[type='range']::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 50%;
    background-color: var(--btn-bg);
    box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--btn-bg) 18%, transparent);
}

input[type='range']:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--btn-bg) 22%, transparent);
}

input[type='range']:active::-webkit-slider-thumb {
    scale: 1.1;
}