.cp{display:inline-block;position:relative}.cp--disabled{opacity:.5;pointer-events:none}.cp__trigger{border:2px solid hsla(0,0%,100%,.15);border-radius:5px;cursor:pointer;height:36px;overflow:hidden;position:relative;transition:border-color .15s;width:36px}.cp__trigger:hover{border-color:#fff6}.cp__checker,.cp__swatch{inset:0;position:absolute}.cp__checker{background-image:linear-gradient(45deg,#555 25%,transparent 0),linear-gradient(-45deg,#555 25%,transparent 0),linear-gradient(45deg,transparent 75%,#555 0),linear-gradient(-45deg,transparent 75%,#555 0);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}.cp__swatch{z-index:1}.cp__popover{background:#1c1c1c;border:1px solid hsla(0,0%,100%,.12);border-radius:10px;box-shadow:0 12px 40px #000000a6;padding:12px;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:226px}.cp__sv{border-radius:6px;cursor:crosshair;height:150px;margin-bottom:10px;overflow:hidden;position:relative;width:100%}.cp__sv-cursor{border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #00000080;height:13px;pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:13px}.cp__alpha-bar,.cp__hue{border-radius:7px;cursor:pointer;height:13px;margin-bottom:8px;overflow:hidden;position:relative}.cp__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.cp__alpha-checker{background-image:linear-gradient(45deg,#555 25%,transparent 0),linear-gradient(-45deg,#555 25%,transparent 0),linear-gradient(45deg,transparent 75%,#555 0),linear-gradient(-45deg,transparent 75%,#555 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px}.cp__alpha-checker,.cp__alpha-gradient{inset:0;position:absolute}.cp__bar-cursor{border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #00000080;height:14px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;z-index:2}.cp__inputs{display:flex;gap:6px;margin-top:10px}.cp__field{align-items:center;background:#111;border:1px solid hsla(0,0%,100%,.1);border-radius:4px;display:flex;flex:1;gap:4px;padding:5px 8px}.cp__field span{color:#ffffff59;flex-shrink:0}.cp__field input,.cp__field span{font-family:monospace;font-size:12px}.cp__field input{background:none;border:none;color:#fff;min-width:0;outline:none;width:100%}.cp__field--a{flex:0 0 auto;width:68px}.cp__field--a input{-moz-appearance:textfield;text-align:right;width:36px}.cp__field--a input::-webkit-inner-spin-button,.cp__field--a input::-webkit-outer-spin-button{-webkit-appearance:none}