#swatch {
    position: relative;
    width: 100%;
    height: 22px;
    background-color: hsl(0, 0%, 0%);
}

#block {
    position: relative;
    content: "";
    width: 100%;
    height: 255px;
    overflow: hidden;
    background-color: hsl(0, 100%, 50%);
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    border-width: 0px;
}

#block .select {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border: 1px solid #FFF;
    border-radius: 50%;
    mix-blend-mode: difference;
}

.slider {
    color: #000;
    text-align: center;
    border: none;
    position: relative;
    content: "";
    width: 100%;
    height: 22px;
    overflow: hidden;
    background: #FFF;
}

.slider .select {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    max-width: 6px;
    width: 6px;
    min-width: 6px;
    height: calc(100% - 2px);
    border: 1px solid #FFF;
    mix-blend-mode: difference;
}

#hue {
    background-image: linear-gradient(to right, 
    hsl(0, 100%, 50%),
    hsl(15, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(75, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(105, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(165, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(195, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(255, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(285, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(345, 100%, 50%),
    hsl(360, 100%, 50%)
    );
}

#alpha {
    position: relative;
    content: "";
    width: 100%;
    height: 22px;
    overflow: hidden;
    background-image: linear-gradient(to right, #000F, #0000), url('../assets/bg.png');
}