.picker{position:relative}.swatch{width:28px;height:28px;border-radius:8px;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.1);cursor:pointer}.popover{position:absolute;top:calc(100% + 2px);right:0;border-radius:9px;box-shadow:0 6px 12px rgba(0,0,0,.15);z-index:10000}input[type=range]{font-size:1.5rem;width:100%;color:#d1d5db;--thumb-height:0.5em;--track-height:0.1em;--track-color:hsla(0,0%,77%,.2);--brightness-hover:180%;--brightness-down:80%;--clip-edges:0.125em}input[type=range].win10-thumb{color:#2b2d42;--thumb-height:1.375em;--thumb-width:0.5em;--clip-edges:0.0125em}input[type=range]{position:relative;background:hsla(0,0%,100%,0);overflow:hidden}input[type=range]:disabled{filter:grayscale(1);opacity:.3;cursor:not-allowed}input[type=range],input[type=range]::-webkit-slider-runnable-track,input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-webkit-transition:all .1s ease;transition:all .1s ease;height:var(--thumb-height)}input[type=range]::-webkit-slider-runnable-track,input[type=range]::-webkit-slider-thumb{position:relative}input[type=range]::-webkit-slider-thumb{--thumb-radius:calc((var(--thumb-height) * 0.5) - 1px);--clip-top:calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);--clip-bottom:calc(var(--thumb-height) - var(--clip-top));--clip-further:calc(100% + 1px);--box-fill:calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;width:var(--thumb-width,var(--thumb-height));background:linear-gradient(currentColor 0 0) scroll no-repeat 0/50% calc(var(--track-height) + 1px);background-color:currentColor;box-shadow:var(--box-fill);border-radius:var(--thumb-width,var(--thumb-height));filter:brightness(100%);-webkit-clip-path:polygon(100% -1px,var(--clip-edges) -1px,0 var(--clip-top),-100vmax var(--clip-top),-100vmax var(--clip-bottom),0 var(--clip-bottom),var(--clip-edges) 100%,var(--clip-further) var(--clip-further));clip-path:polygon(100% -1px,var(--clip-edges) -1px,0 var(--clip-top),-100vmax var(--clip-top),-100vmax var(--clip-bottom),0 var(--clip-bottom),var(--clip-edges) 100%,var(--clip-further) var(--clip-further))}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(var(--track-color) 0 0) scroll no-repeat 50%/100% calc(var(--track-height) + 1px)}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range],input[type=range]::-moz-range-thumb,input[type=range]::-moz-range-track{-moz-appearance:none;appearance:none;-moz-transition:all .1s ease;transition:all .1s ease;height:var(--thumb-height)}input[type=range]::-moz-range-progress,input[type=range]::-moz-range-thumb,input[type=range]::-moz-range-track{background:hsla(0,0%,100%,0)}input[type=range]::-moz-range-thumb{background:currentColor;border:0;width:var(--thumb-width,var(--thumb-height));border-radius:var(--thumb-width,var(--thumb-height));cursor:grab}input[type=range]:active::-moz-range-thumb{cursor:grabbing}input[type=range]::-moz-range-track{width:100%;background:var(--track-color)}input[type=range]::-moz-range-progress{-moz-appearance:none;appearance:none;background:currentColor;transition-delay:30ms}input[type=range]::-moz-range-progress,input[type=range]::-moz-range-track{height:calc(var(--track-height) + 1px);border-radius:var(--track-height)}input[type=range]::-moz-range-progress,input[type=range]::-moz-range-thumb{filter:brightness(100%)}input[type=range]:hover::-moz-range-progress,input[type=range]:hover::-moz-range-thumb{filter:brightness(var(--brightness-hover))}input[type=range]:active::-moz-range-progress,input[type=range]:active::-moz-range-thumb{filter:brightness(var(--brightness-down))}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}