:root {
    --min-hue: 150;
    --max-hue: 260;
    --sat-scale: 1.5;
    --y0-lum: 800;
    --y1-lum: 0;
    --y0-hue: 800;
    --y1-hue: 0;
    --scale-y: 0.01;
    --randomisation: 0.2;
    --template-scale: 1;
    --hue-interpolation: longer hue;
}


svg {
    max-width: 100%;
    max-height: 100%;
    border: 1px solid black;
}
body {

    padding: 0;
    margin: 0;
    display: grid;
    grid-template:
     "drawing controls" / 1fr 1fr;
    gap: 1em;
}
fieldset {
    display: grid;
    gap: 1em;
    grid-template-columns: auto 1fr auto;
    
    & label {
        justify-self: end;
        grid-column: 1;
    }
    & input {
        grid-column: 2;
    }
    & output {
        justify-self: start;
        grid-column: 3;
    }
}
.colour-input-wrapper {
    display: inline-block;
    background-image: linear-gradient(in hsl longer hue to right, hsl(0, 100%, 50%), hsl(360, 100%, 50%));

    & input {
        width: 100%;
    }
}
.spectre {
    --sat: calc(var(--t) * var(--sat-scale) * 1%);
    --min-r: calc(1 - var(--randomisation));
    --max-r: calc(1 + var(--randomisation));
    --random: calc(var(--min-r) + (var(--max-r) - var(--min-r)) * var(--r));
    --lum: calc(100% * ((var(--y) - var(--y0-lum)) / (var(--y1-lum) - var(--y0-lum))) * var(--random));
    --mix: calc(100% * ((var(--y) - var(--y0-hue)) / (var(--y1-hue) - var(--y0-hue))));

    --col1: hsl(var(--min-hue), var(--sat), var(--lum));
    --col2: hsl(var(--max-hue), var(--sat), var(--lum));
    fill: color-mix(in hsl var(--hue-interpolation), var(--col1), var(--col2) var(--mix));
}

#draggables circle {
    r: calc(5px / var(--zoom));
    stroke-width: calc(0.5px / var(--zoom));
    stroke: white;
    fill: black;

    &#y1-lum {
      fill: white;
      stroke: black;
    }

    &#y0-hue {
        fill: hsl(var(--min-hue), 100%, 50%);
    }

    &#y1-hue {
        fill: hsl(var(--max-hue), 100%, 50%);
    }
}

#draggables image {
    width: calc(20px * var(--template-scale));
}

svg:not([data-template="hoodie"]) #draggables image.template.hoodie {
  display: none;
}

svg:not([data-template="tshirt"]) #draggables image.template.tshirt {
  display: none;
}

#link {
  display: none;
}