:root {
    --hue: 0;
    --saturation: 50%;
    --lightness: 50%;
}

.colorRangeInput {
    width: 100%;
    margin-top: 1rem;
    height: 20px;
    -webkit-appearance: none;;
    border-radius: 2px;
    transform: skewX(-3deg);
    outline: none;
    border: 1px solid #000;
    box-shadow: 0px 2px 0px #000;
    accent-color: var(--btn_bg_def);
}
.colorRangeInput.hue {
    background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);
}
.colorRangeInput.saturation[data-target="bg1"] {
    background: linear-gradient(to right, hsl(var(--hue), 0%, 50%), hsl(109, 100%, 50%));
}
.colorRangeInput.saturation[data-target="bg2"] {
    background: linear-gradient(to right, hsl(0, 0%, 50%), hsl(140, 28%, 31%));
}
.colorRangeInput.saturation[data-target="bg3"] {
    background: linear-gradient(to right, hsl(0, 0%, 50%), hsl(111, 100%, 80%));
}
.colorRangeInput.lightness[data-target="bg1"] {
    background: linear-gradient(to right, hsl(var(--hue), 100%, 0%), hsl(109, 62%, 50%), hsl(var(--hue), 100%, 100%));
}
.colorRangeInput.lightness[data-target="bg2"] {
    background: linear-gradient(to right, hsl(var(--hue), 100%, 0%), hsl(140, 28%, 31%), hsl(var(--hue), 100%, 100%));
}
.colorRangeInput.lightness[data-target="bg3"] {
    background: linear-gradient(to right, hsl(var(--hue), 100%, 0%), hsl(111, 100%, 80%), hsl(var(--hue), 100%, 100%));
}
.colorRangeInput::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 30px;
    --c1: #09f;
    --c2: #07f;
    --c3: #049;
    background: linear-gradient(to bottom, var(--c1) 10%, var(--c2) 10%, var(--c2) 90%, var(--c3) 90%);
    border-radius: 2px;
    cursor: pointer;
    box-shadow: var(--bs-shadow);
}
.hexColorInput {
    width: 65px;
    text-align: center;
    font-family: monospace;
    padding: .2rem .3rem;
    outline: 0;
    border: 1px solid #000;
    border-radius: 3px;
    transform: skewX(-2deg);
    background: linear-gradient(0deg, #fff 90%, #ccc 90%);
}