/* author: Mads Stoumann
https://codepen.io/stoumann/pen/OJayVmr */

:where(fieldset[data-uic~="color-compare"]) {
    border: var(--cc-bdw, 1px) solid var(--cc-bdc, #ccc);
    border-radius: var(--cc-bdrs, 0.25em);
    container-type: inline-size;
    display: grid;
    margin: 0;
    padding: 0;

    & img,
    & input {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        position: relative;
    }

    & img {
        width: 100%;
    }

    & input[type="color"] {
        align-self: var(--cc-color-as, start);
        background: transparent;
        border: 0;
        border-radius: var(--cc-color-bdrs, 50%);
        height: var(--cc-color-w, min(10cqi, 5em));
        margin: 1cqi;
        padding: 0;
        width: var(--cc-color-w, min(10cqi, 5em));

        &::-webkit-color-swatch,
        &::-webkit-color-swatch-wrapper {
            border: 0;
            border-radius: inherit;
            padding: 0;
        }
    }

    & input[type="range"] {
        appearance: none;
        background: transparent;
        margin: 0;
        touch-action: none;

        &::before {
            background-image: linear-gradient(to right, var(--_c1) 0 var(--_x), var(--_c2) 0 var(--_x));
            content: "";
            inset: 0;
            -webkit-mask: var(--cc-mask) no-repeat center / cover;
            mask: var(--cc-mask) no-repeat center / cover;
            mix-blend-mode: multiply;
            position: absolute;
        }

        &::-webkit-slider-runnable-track {
            height: 100%;
        }

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            background: var(--cc-thumb-bg, #ccc);
            cursor: ew-resize;
            height: 100%;
            position: relative;
            width: var(--cc-thumb-w, min(3cqi, 1.25em));
        }
    }

    & label {
        display: contents;
        &:has(input[type="color"]):last-of-type input {
            justify-self: end;
        }
    }
}

/* demo */
:where(body) {
    background: canvas;
    color: canvastext;
    color-scheme: light dark;
    font-family: ui-sans-serif, system-ui, sans-serif;
    margin-inline: auto;
    padding-inline: 2ch;
}