.vacp-color-picker{display:grid;max-inline-size:var(--vacp-width-color-space,300px);padding:var(--vacp-spacing,6px);grid-gap:var(--vacp-spacing,6px);background-color:var(--vacp-color-background,#fff);color:var(--vacp-color-text,currentColor);font-family:var(--vacp-font-family,-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif);font-size:var(--vacp-font-size,.8em);grid-template-columns:1fr min-content}.vacp-color-picker,.vacp-color-picker *,.vacp-color-picker :after,.vacp-color-picker :before{box-sizing:border-box}.vacp-color-picker :focus{outline:2px solid var(--vacp-color-focus,#19f)}.vacp-color-picker button::-moz-focus-inner{border:none;padding:0}:where(.vacp-color-picker) button{align-items:center;background-color:var(--vacp-color-background-input,#fff);block-size:calc(var(--vacp-spacing, 6px)*6);border:var(--vacp-width-border,1px) solid transparent;border-radius:50%;color:var(--vacp-color-text-input,currentColor);display:flex;font:inherit;inline-size:calc(var(--vacp-spacing, 6px)*6);justify-content:center;margin:0;padding:var(--vacp-spacing,6px)}:where(.vacp-color-picker) button:focus{border-color:var(--vacp-color-border,#000)}:where(.vacp-color-picker) button:enabled:hover{background-color:#0002}.vacp-color-space{aspect-ratio:1/.6;grid-column:1/-1;overflow:hidden}.vacp-color-space-thumb{--vacp-thumb-size:calc(var(--vacp-spacing, 6px)*4);block-size:var(--vacp-thumb-size);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-width-border,1px) var(--vacp-color-border,#000);inline-size:var(--vacp-thumb-size);margin-block-end:calc(var(--vacp-thumb-size)*-1/2);margin-inline-start:calc(var(--vacp-thumb-size)*-1/2);transform:rotate(0)}.vacp-color-space-thumb:focus{box-shadow:0 0 0 var(--vacp-width-border,1px) var(--vacp-color-border,#000),0 0 0 calc(var(--vacp-width-border, 1px) + 2px) var(--vacp-color-focus,#19f);outline-color:transparent}.vacp-range-input-label{--vacp-slider-track-height:calc(var(--vacp-spacing, 6px)*3);--vacp-slider-thumb-size:calc(var(--vacp-spacing, 6px)*4 - var(--vacp-width-border, 1px)*2);display:block}.vacp-range-input-group{display:flex;flex-direction:column;justify-content:center}.vacp-range-input-group>:not(:first-child){margin-block-start:var(--vacp-spacing,6px)}.vacp-range-input,.vacp-range-input::-webkit-slider-thumb{-webkit-appearance:none}.vacp-range-input{background:none;block-size:var(--vacp-slider-track-height);border:none;display:block;inline-size:100%;margin-block:calc(var(--vacp-spacing, 6px)/2 + 1px);margin-inline:0;padding:0}.vacp-range-input:focus{outline:none}.vacp-range-input::-moz-focus-outer{border:none}.vacp-range-input--alpha{background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee);background-position:0 0,var(--vacp-spacing,6px) var(--vacp-spacing,6px);background-size:calc(var(--vacp-spacing, 6px)*2) calc(var(--vacp-spacing, 6px)*2)}.vacp-range-input::-moz-range-track{block-size:var(--vacp-slider-track-height);border:var(--vacp-width-border,1px) solid var(--vacp-color-border,#000);box-sizing:border-box;inline-size:100%}.vacp-range-input::-webkit-slider-runnable-track{block-size:var(--vacp-slider-track-height);border:var(--vacp-width-border,1px) solid var(--vacp-color-border,#000);box-sizing:border-box;inline-size:100%}.vacp-range-input::-ms-track{block-size:var(--vacp-slider-track-height);border:var(--vacp-width-border,1px) solid var(--vacp-color-border,#000);box-sizing:border-box;inline-size:100%}.vacp-range-input:focus::-moz-range-track{outline:2px solid var(--vacp-color-focus,#19f)}.vacp-range-input:focus::-webkit-slider-runnable-track{outline:2px solid var(--vacp-color-focus,#19f)}.vacp-range-input:focus::-ms-track{outline:2px solid var(--vacp-color-focus,#19f)}.vacp-range-input--alpha::-moz-range-track{background-image:linear-gradient(to right,transparent,var(--vacp-color))}.vacp-range-input--alpha::-webkit-slider-runnable-track{background-image:linear-gradient(to right,transparent,var(--vacp-color))}.vacp-range-input--alpha::-ms-track{background-image:linear-gradient(to right,transparent,var(--vacp-color))}.vacp-range-input--hue::-moz-range-track{background-image:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.vacp-range-input--hue::-webkit-slider-runnable-track{background-image:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.vacp-range-input--hue::-ms-track{background-image:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.vacp-range-input::-moz-range-thumb{background-color:transparent;block-size:var(--vacp-slider-thumb-size);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-width-border,1px) var(--vacp-color-border,#000);box-sizing:border-box;inline-size:var(--vacp-slider-thumb-size);isolation:isolate}.vacp-range-input::-webkit-slider-thumb{background-color:transparent;block-size:var(--vacp-slider-thumb-size);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-width-border,1px) var(--vacp-color-border,#000);box-sizing:border-box;inline-size:var(--vacp-slider-thumb-size);isolation:isolate;margin-block-start:calc(var(--vacp-spacing, 6px)*-1/2)}.vacp-range-input::-ms-thumb{background-color:transparent;block-size:var(--vacp-slider-thumb-size);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-width-border,1px) var(--vacp-color-border,#000);box-sizing:border-box;inline-size:var(--vacp-slider-thumb-size);isolation:isolate;margin-block-start:calc(var(--vacp-spacing, 6px)*-1/2)}.vacp-actions{align-items:center;align-self:center;display:flex;gap:var(--vacp-spacing,6px);justify-self:center}.vacp-color-inputs{align-items:center;display:flex;grid-column:1/-1}.vacp-color-inputs>:not(:first-child){margin-inline-start:var(--vacp-spacing,6px)}.vacp-color-input-group{-moz-column-gap:var(--vacp-spacing,6px);column-gap:var(--vacp-spacing,6px);display:grid;flex-grow:1;grid-auto-flow:column}.vacp-color-input-label{text-align:center}.vacp-color-input{background-color:var(--vacp-color-background-input,#fff);border:var(--vacp-width-border,1px) solid var(--vacp-color-border,#000);color:inherit;color:var(--vacp-color-text-input,currentColor);font:inherit;margin:0;margin-block-start:calc(var(--vacp-spacing, 6px)/2);padding:var(--vacp-spacing,6px);text-align:center;width:100%}.vacp-format-switch-button{flex-shrink:0}.vacp-visually-hidden{overflow:hidden;position:absolute;clip:rect(0 0 0 0);block-size:1px;border:0;inline-size:1px;margin:-1px;padding:0;white-space:nowrap}.dark .vacp-color-picker{background:var(--color-slate-950);.vacp-color-inputs,.vacp-format-switch-button,input[type=text]{background-color:var(--color-slate-950)}input[type=text]{border-color:var(--color-slate-800)}}