.custom-color-token-popover .react-colorful{width:100%;height:160px}.custom-color-token-popover .react-colorful__saturation{border-bottom-width:6px;border-radius:.5rem}.custom-color-token-popover .react-colorful__last-control{border-radius:0 0 .5rem .5rem}.custom-color-token-popover .react-colorful__hue{border-radius:9999px;height:12px;margin-top:12px}.custom-color-token-popover .react-colorful__pointer{width:16px;height:16px}.var-opacity-slider{--var-opacity-color:#000;--var-opacity-checker-light:#fff;--var-opacity-checker-dark:#e5e5e5}.dark .var-opacity-slider{--var-opacity-checker-light:#3f3f46;--var-opacity-checker-dark:#27272a}.var-opacity-slider-control{cursor:pointer;touch-action:none;height:16px;position:relative}.var-opacity-slider-track{background-color:var(--var-opacity-checker-light);background-image:linear-gradient(to right, transparent, var(--var-opacity-color)), url("data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill-opacity=\".05\"><path d=\"M8 0h8v8H8zM0 8h8v8H0z\"/></svg>");border-radius:9999px;height:12px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);box-shadow:inset 0 0 0 1px #0000000d}.var-opacity-slider-thumb{background-color:var(--var-opacity-thumb-color,var(--var-opacity-color));border:2px solid #fff;border-radius:9999px;outline:none;width:16px;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000014,0 1px 2px #0000001f}.var-opacity-slider-thumb:focus-visible{box-shadow:0 0 0 1px #00000014, 0 1px 2px #0000001f, 0 0 0 2px var(--ring,#3b82f6)}