*,*: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)}.rgba-slider{--handle-size: 50;--track-height: 20;--border: 4;width:280px;height:calc(var(--track-height) * 1px);border:calc(var(--border) * 1px) solid #111;border-radius:calc(var(--border) * 1px);position:relative;max-width:70vw;cursor:pointer;background:rgba(var(--red),var(--green),var(--blue),var(--alpha))}.rgba-slider:after,.rgba-slider:before{height:calc(var(--border) * 1px);width:100%;position:absolute;background:#f2f2f2;content:"";top:50%;left:0;transform:translateY(calc(-50% - (var(--handle-size) * .5 + var(--track-height) * .5) * 1px))}.rgba-slider:before{transform:translateY(calc(-50% + (var(--handle-size) * .5 + var(--track-height) * .5) * 1px))}.rgba-slider__handle{height:calc(var(--handle-size) * 1px);width:calc(var(--handle-size) * 1px);touch-action:none;position:absolute;top:50%;left:calc((var(--value, 0) / 255) * 100%);transform:translate(-50%,calc(-100% - (var(--track-height) * .5) * 1px));cursor:var(--cursor);z-index:var(--z)}.rgba-slider__handle:after{content:"";height:50%;width:50%;border:4px solid #000;position:absolute;top:50%;left:50%;border-radius:100%;transform:translate(-50%,-50%);background:var(--color)}.rgba-slider__handle[data-rgba-slider-prop=alpha]{left:calc(var(--value, 0) * 100%);transform:translate(-50%,calc(0% + (var(--track-height) * .5) * 1px))}.rgba-slider__handle[data-rgba-slider-prop=alpha]:after{background:rgba(var(--red),var(--green),var(--blue),var(--alpha))}.container{position:relative}.values{font-size:.5rem;position:absolute;color:#ccc;top:calc(100% + 100px)}