*,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{align-items:center;background:#fff;display:flex;justify-content:center;min-height:100vh;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;cursor:var(--cursor)}.hsl-slider{--handle-size: 50;width:280px;height:20px;border:4px solid #111;border-radius:4px;position:relative;max-width:70vw;cursor:pointer;background:linear-gradient(90deg,hsl(0,calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%)),hsl(36,calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%)),hsl(72,calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%)),hsl(108,calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%)),hsl(144,calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%)),hsl(180,calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%)),hsl(216,calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%)),hsl(252,calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%)),hsl(288,calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%)),hsl(324,calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%)),hsl(360,calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%)))}.hsl-slider__arc{height:calc(var(--handle-size) * 2px + 4px);width:calc(var(--handle-size) * 2px + 4px);position:absolute;top:50%;left:calc(var(--value, 0) * 1%);transform:translate(-50%,-50%);border-radius:100%;opacity:.2;border:4px solid #c6c6c6;z-index:-1;clip-path:polygon(0 0,100% 0,50% 50%,100% 100%,0 100%,50% 50%)}.hsl-slider__handle{height:calc(var(--handle-size) * 1px);width:calc(var(--handle-size) * 1px);border-radius:100%;background:hsl(var(--hue, 0),calc(var(--saturation, 100) * 1%),calc(var(--lightness, 50) * 1%));border:4px solid #111;touch-action:none;position:absolute;top:50%;left:calc(var(--value, 0) * 1%);transform:translate(-50%,-50%);cursor:var(--cursor)}.hsl-slider__handle--lightness,.hsl-slider__handle--saturation{left:50%;width:100%;height:100%;background:transparent;border:0;transform:translate(-50%,-50%) rotate(90deg) rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--handle-size) * 1px))}.hsl-slider__handle--lightness:before,.hsl-slider__handle--saturation:before{display:none}.hsl-slider__handle--lightness:after,.hsl-slider__handle--saturation:after{content:"";position:absolute;height:50%;width:50%;border:4px solid #111;border-radius:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.hsl-slider__handle--lightness:after{background:hsl(0,0%,calc(var(--lightness, 50) * 1%))}.hsl-slider__handle--saturation:after{background:linear-gradient(90deg,hsl(0,calc(var(--saturation, 50) * 1%),50%),hsl(36,calc(var(--saturation, 50) * 1%),50%),hsl(72,calc(var(--saturation, 50) * 1%),50%),hsl(108,calc(var(--saturation, 50) * 1%),50%),hsl(144,calc(var(--saturation, 50) * 1%),50%),hsl(180,calc(var(--saturation, 50) * 1%),50%),hsl(216,calc(var(--saturation, 50) * 1%),50%),hsl(252,calc(var(--saturation, 50) * 1%),50%),hsl(288,calc(var(--saturation, 50) * 1%),50%),hsl(324,calc(var(--saturation, 50) * 1%),50%),hsl(360,calc(var(--saturation, 50) * 1%),50%))}.container{position:relative}.values{font-size:.5rem;position:absolute;color:#ccc;top:calc(100% + 100px)}