@layer vectis.reset,vectis.tokens;@layer vectis.components{.v-color-picker{--color-picker-checker:repeating-conic-gradient(var(--vectis-color-border) 0 25%, var(--vectis-color-surface) 0 50%) 0 0 / var(--vectis-control-size-color-picker-checker) var(--vectis-control-size-color-picker-checker);--color-picker-thumb:var(--vectis-control-size-color-picker-thumb);gap:var(--vectis-space-3);inline-size:var(--vectis-control-size-color-picker-width);max-inline-size:100%;padding:var(--vectis-space-3);color:var(--vectis-color-text);font-family:var(--vectis-text-family);flex-direction:column;display:inline-flex}.v-color-picker-area,.v-color-picker-chip,.v-color-picker-preview,.v-color-picker-track{forced-color-adjust:none;direction:ltr}.v-color-picker-area{block-size:var(--vectis-control-size-color-picker-area);border-radius:var(--vectis-radius-interactive);background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(var(--color-picker-hue) 100% 50%);cursor:crosshair;touch-action:none;position:relative}.v-color-picker-thumb{inline-size:var(--color-picker-thumb);block-size:var(--color-picker-thumb);border-radius:var(--vectis-radius-pill);background:var(--color-picker-opaque);pointer-events:none;border:2px solid #fff;position:absolute;inset-block-start:calc((1 - var(--color-picker-v)) * 100%);inset-inline-start:calc(var(--color-picker-s) * 100%);translate:-50% -50%;box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #0006}.v-color-picker-area:has(.v-hidden-input:focus-visible) .v-color-picker-thumb{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-color-picker-controls{align-items:center;gap:var(--vectis-space-2);display:flex}.v-color-picker-preview{inline-size:var(--vectis-control-size-color-picker-preview);block-size:var(--vectis-control-size-color-picker-preview);border-radius:var(--vectis-radius-pill);background:linear-gradient(var(--color-picker-color),var(--color-picker-color)),var(--color-picker-checker);box-shadow:inset 0 0 0 1px var(--vectis-color-border);flex:none}.v-color-picker-tracks{gap:var(--vectis-space-3);flex-direction:column;flex:1;min-inline-size:0;display:flex}.v-color-picker-track{inline-size:100%;block-size:var(--vectis-control-size-color-picker-track);border-radius:var(--vectis-radius-pill);appearance:none;cursor:pointer;margin:0;display:block}.v-color-picker-hue{--color-picker-track-thumb:hsl(var(--color-picker-hue) 100% 50%);background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.v-color-picker-alpha{--color-picker-track-thumb:var(--color-picker-color);background:linear-gradient(to right,transparent,var(--color-picker-opaque)),var(--color-picker-checker)}.v-color-picker-track::-webkit-slider-thumb{appearance:none;inline-size:var(--color-picker-thumb);block-size:var(--color-picker-thumb);border-radius:var(--vectis-radius-pill);background:linear-gradient(var(--color-picker-track-thumb),var(--color-picker-track-thumb)),var(--color-picker-checker);border:2px solid #fff;box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #0006}.v-color-picker-track::-moz-range-thumb{box-sizing:border-box;inline-size:var(--color-picker-thumb);block-size:var(--color-picker-thumb);border-radius:var(--vectis-radius-pill);background:linear-gradient(var(--color-picker-track-thumb),var(--color-picker-track-thumb)),var(--color-picker-checker);border:2px solid #fff;box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #0006}.v-color-picker-track:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-color-picker-fields{gap:var(--vectis-space-2);display:flex}.v-color-picker-format{block-size:var(--vectis-control-height-sm);padding-inline:var(--vectis-space-2);border:1px solid var(--vectis-color-border-strong);border-radius:var(--vectis-radius-interactive);background:var(--vectis-color-surface);color:var(--vectis-color-text);font-family:var(--vectis-text-family);font-size:var(--vectis-text-body-sm-size);font-weight:var(--vectis-text-body-sm-weight);line-height:var(--vectis-text-body-sm-leading);cursor:pointer;flex:none}.v-color-picker-format:focus-visible{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-color-picker-value{flex:1;min-inline-size:0}.v-color-picker-value .v-input-control{font-variant-numeric:tabular-nums;direction:ltr}.v-color-picker-value .v-input-control:dir(rtl){text-align:right}.v-color-picker-swatches{gap:var(--vectis-space-2);border:0;flex-wrap:wrap;min-inline-size:0;margin:0;padding:0;display:flex}.v-color-picker-swatch{cursor:pointer;display:inline-flex;position:relative}.v-color-picker-chip{inline-size:var(--vectis-control-size-color-picker-swatch);block-size:var(--vectis-control-size-color-picker-swatch);border-radius:var(--vectis-radius-interactive);background:linear-gradient(var(--color-picker-swatch),var(--color-picker-swatch)),var(--color-picker-checker);box-shadow:inset 0 0 0 1px var(--vectis-color-border)}.v-color-picker-swatch .v-hidden-input:checked+.v-color-picker-chip{outline:2px solid var(--vectis-color-text);outline-offset:1px}.v-color-picker-swatch .v-hidden-input:focus-visible+.v-color-picker-chip{outline:var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);outline-offset:var(--vectis-focus-ring-offset)}.v-color-picker[data-disabled] :is(.v-color-picker-area,.v-color-picker-preview,.v-color-picker-track,.v-color-picker-chip){opacity:.5}.v-color-picker[data-disabled] :is(.v-color-picker-area,.v-color-picker-track,.v-color-picker-swatch){cursor:not-allowed}.v-color-picker-format:disabled{border-color:var(--vectis-color-border);background:var(--vectis-color-surface-muted);color:var(--vectis-color-text-subtle);cursor:not-allowed}}@layer vectis.utilities;