* {
    margin: 0;
    box-sizing: border-box;
}

:root {
    color-scheme: light dark;
    font-family: system-ui;

    --transparent-primary: #ccc;
    --transparent-secondary: #fff;

    background: repeating-conic-gradient(var(--transparent-primary) 0 25%, var(--transparent-secondary) 0 50%) 50% / 20px 20px
}

@media(prefers-color-scheme: dark) {
    :root {
        --transparent-primary: #555;
        --transparent-secondary: #222;
    }
}

#current-gradient [data-show-linear]  { display: none; }
#current-gradient [data-show-radial]  { display: none; }
#current-gradient [data-show-conic]   { display: none; }
#current-gradient [data-show-circle]  { display: none; }
#current-gradient [data-show-ellipse] { display: none; }
#current-gradient [data-show-polar]   { display: none; }

#current-gradient:has(#type-selector > option[value="linear"]:checked) [data-show-linear] { display: block; }
#current-gradient:has(#type-selector > option[value="radial"]:checked) [data-show-radial] { display: block; }
#current-gradient:has(#type-selector > option[value="conic"]:checked)  [data-show-conic]  { display: block; }

#current-gradient:has(#radial-type-circle:checked)  [data-show-circle]  { display: block; }
#current-gradient:has(#radial-type-ellipse:checked) [data-show-ellipse] { display: block; }

#current-gradient:has(#colorspace > option[data-polar]:checked) [data-show-polar]  { display: block; }

#current-gradient {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: min-content 1fr;
    gap: 1em;
}

body {
    display: grid;
    place-items: center;
    height: 100vh;

    background: var(--global-gradient, Canvas);
}

main {
    width: 80%;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: .5em 2em;
}

#loading {
    position: absolute;
    inset: 0;
    background: Canvas;
    display: grid;
    place-items: center;
    z-index: 999;
    font-size: 4em;
    transition: opacity 500ms linear;
}

#loading.done {
    pointer-events: none;
    opacity: 0;
}

#gradients-list {
    border: 1px solid currentColor;
    overflow: auto;
    padding: 0.5em;
    height: 25em;
}

.radioset {
    display: grid;
    grid-template-columns: min-content 1fr;
    margin-top: 1em;
    column-gap: 0.5em;
}

.gradient-layer-item {
    border: 1px solid currentColor;
    overflow: hidden;
    padding: 1em;
    cursor: pointer;
    background: var(--local-preview-gradient, Canvas);
    margin-block-end: 0.5em;
    display: grid;
    grid-template-columns: 1fr auto auto;
}

.hidden {
    opacity: 0.5;
}

#gradient {
    grid-column: 1 / -1;
}

.buttons {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 0.25em;
}

#slider {
    grid-column: 1 / -1;
    border: 1px solid currentColor;
    border-radius: 1em;
    height: 2em;
    margin-block: 1em;
    background-image: var(--preview-gradient, Canvas);
    cursor: copy;

    position: relative;
}

.stop {
    --handle-color: var(--stop-color);
    --handle-y: 50%;

    height: 3em;
    width: 1em;
    border: 1px solid currentColor;
}

.grabbable:active,
.grabbable.active {
    cursor: grabbing;
}

.grabbable {
    cursor: grab;
}

#colorpicker {
    display: grid;
    gap: 1em;
    margin: 1em;
    place-content: start;
}

#colorpicker-sb {
    grid-column: 1;
    grid-row: 1;

    position: relative;
    width: 10em;
    aspect-ratio: 1;
    border: 1px solid currentColor;

    background-image:
        linear-gradient(to bottom, transparent, black),
        linear-gradient(to right, transparent, var(--hue-color, #FF0000)),
        linear-gradient(white, white);
}

#colorpicker-hue {
    grid-column: 1;
    grid-row: 2;

    position: relative;
    width: 10em;
    height: 2em;
    border: 1px solid currentColor;

    background-image: linear-gradient(to right, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000);
}

#colorpicker-alpha {
    grid-column: 2;
    grid-row: 1;

    position: relative;
    width: 2em;
    height: 10em;
    border: 1px solid currentColor;

    background-image: linear-gradient(to bottom, currentColor, Canvas);
}

#colorpicker-sb-handle {
    --handle-color: var(--sb-color);

    width: .5em;
    aspect-ratio: 1;
    outline: 1px solid currentColor;
}

#colorpicker-hue-handle {
    --handle-y: 50%;
    --handle-color: var(--hue-color);

    height: 3em;
    width: .5em;
    outline: 1px solid currentColor;
}

#colorpicker-alpha-handle {
    --handle-x: 50%;
    --handle-color: var(--alpha-color);

    height: .5em;
    width: 3em;
    outline: 1px solid currentColor;
}

.handle {
    position: absolute;
    top: var(--handle-y, 0);
    left: var(--handle-x, 0);
    transform: translate(-50%, -50%);
    background-color: var(--handle-color, Canvas);
    border-radius: 100vw;
}

.selected {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}