.vi-color-picker{--vi-color-picker-height:var(--vi-control-height-md,2.75rem);--vi-color-picker-padding-inline:var(--vi-space-3,.75rem);--vi-color-picker-gap:var(--vi-space-2,.5rem);--vi-color-picker-panel-gap:var(--vi-space-3,.75rem);--vi-color-picker-font-size:var(--vi-ref-font-size-md,.82rem);--vi-color-picker-label-size:var(--vi-ref-font-size-xs,.62rem);--vi-color-picker-icon-size:var(--vi-ref-control-icon-md,1rem);--vi-color-picker-chip-size:var(--vi-ref-control-icon-lg,1.25rem);--vi-color-picker-label-color:var(--vi-standby-text);--vi-color-picker-text-color:var(--vi-standby-text);--vi-color-picker-muted-color:color-mix(in srgb, var(--vi-standby-text) 50%, transparent);--vi-color-picker-focus-color:var(--vi-active);--vi-color-picker-error-color:var(--vi-color-danger,#ff8095);--vi-color-picker-disabled-opacity:.42;width:min(100%,20rem);position:relative}.vi-color-picker[data-size=sm]{--vi-color-picker-height:var(--vi-control-height-sm,2rem);--vi-color-picker-padding-inline:var(--vi-space-2,.5rem);--vi-color-picker-font-size:var(--vi-ref-font-size-sm,.72rem);--vi-color-picker-chip-size:var(--vi-ref-control-icon-md,1rem);--vi-color-picker-icon-size:var(--vi-ref-control-icon-sm,.875rem)}.vi-color-picker[data-size=lg]{--vi-color-picker-height:var(--vi-control-height-lg,3.25rem);--vi-color-picker-padding-inline:var(--vi-space-4,1rem);--vi-color-picker-font-size:var(--vi-ref-font-size-lg,1rem);--vi-color-picker-chip-size:var(--vi-ref-control-icon-lg,1.25rem);--vi-color-picker-icon-size:var(--vi-ref-control-icon-lg,1.25rem)}.vi-color-picker__label{margin-bottom:var(--vi-color-picker-gap);color:var(--vi-color-picker-label-color);font-family:var(--vi-font-code,ui-monospace, monospace);font-size:var(--vi-color-picker-label-size);letter-spacing:var(--vi-ref-letter-spacing-label,.07em);font-weight:700;line-height:var(--vi-ref-line-height-control,1.2);text-transform:uppercase;display:block}.vi-color-picker__trigger-surface,.vi-color-picker__panel-surface{width:100%;transition:border-color var(--vi-motion-duration-fast,.12s) var(--vi-motion-ease-out,ease-out), box-shadow var(--vi-motion-duration-fast,.12s) var(--vi-motion-ease-out,ease-out)}.vi-color-picker:focus-within .vi-color-picker__trigger-surface{border-color:var(--vi-color-picker-focus-color);box-shadow:0 0 0 var(--vi-focus-width,2px) color-mix(in srgb, var(--vi-color-picker-focus-color) 16%, transparent)}.vi-color-picker__trigger{width:100%;height:var(--vi-color-picker-height);align-items:center;gap:var(--vi-color-picker-gap);padding:0 var(--vi-color-picker-padding-inline);border-radius:inherit;color:var(--vi-color-picker-text-color);font-family:var(--vi-font-code,ui-monospace, monospace);font-size:var(--vi-color-picker-font-size);text-align:left;background:0 0;border:0;grid-template-columns:auto 1fr auto;display:grid}.vi-color-picker__trigger:focus-visible{outline:0}.vi-color-picker__chip{width:var(--vi-color-picker-chip-size);height:var(--vi-color-picker-chip-size);border:var(--vi-border-width,1px) solid color-mix(in srgb, var(--vi-standby-text) 24%, transparent);border-radius:min(var(--vi-radius), 5px);box-shadow:inset 0 0 0 1px #0000001f}.vi-color-picker__caret{width:var(--vi-color-picker-icon-size);height:var(--vi-color-picker-icon-size);color:var(--vi-color-picker-muted-color);transition:color var(--vi-motion-duration-fast,.12s) var(--vi-motion-ease-out,ease-out), transform var(--vi-motion-duration-standard,.22s) var(--vi-motion-ease-out,ease-out)}.vi-color-picker__caret[data-open=true]{color:var(--vi-color-picker-focus-color);transform:rotate(180deg)}.vi-color-picker__popover{z-index:var(--vi-layer-popover,20);top:calc(100% + var(--vi-color-picker-gap));transform-origin:top;position:absolute;left:0;right:0}.vi-color-picker__panel{gap:var(--vi-color-picker-panel-gap);padding:var(--vi-space-3,.75rem);display:grid}.vi-color-picker__native,.vi-color-picker__hex{gap:var(--vi-space-2,.5rem);color:var(--vi-color-picker-muted-color);font-family:var(--vi-font-code,ui-monospace, monospace);font-size:var(--vi-color-picker-label-size);letter-spacing:var(--vi-ref-letter-spacing-label,.07em);text-transform:uppercase;font-weight:700;display:grid}.vi-color-picker__native>span{align-items:center;gap:var(--vi-space-2,.5rem);display:flex}.vi-color-picker__native svg{width:var(--vi-color-picker-icon-size);height:var(--vi-color-picker-icon-size)}.vi-color-picker__native input[type=color]{width:100%;height:var(--vi-control-height-lg,3.25rem);padding:var(--vi-space-1,.25rem);border:var(--vi-border-width,1px) solid var(--vi-border);border-radius:max(0px, calc(var(--vi-radius) - var(--vi-space-1,.25rem)));background:0 0}.vi-color-picker__native input[type=color]::-webkit-color-swatch-wrapper{padding:0}.vi-color-picker__native input[type=color]::-webkit-color-swatch{border-radius:max(0px, calc(var(--vi-radius) - var(--vi-space-2,.5rem)));border:0}.vi-color-picker__hex input{width:100%;height:var(--vi-control-height-md,2.75rem);padding:0 var(--vi-space-3,.75rem);border:var(--vi-border-width,1px) solid var(--vi-border);border-radius:max(0px, calc(var(--vi-radius) - var(--vi-space-1,.25rem)));color:var(--vi-color-picker-text-color);font-family:var(--vi-font-code,ui-monospace, monospace);font-size:var(--vi-color-picker-font-size);letter-spacing:0;text-transform:uppercase;background:0 0;outline:0}.vi-color-picker__hex input:focus-visible{border-color:var(--vi-color-picker-focus-color)}.vi-color-picker__hex input[aria-invalid=true]{border-color:var(--vi-color-picker-error-color);color:var(--vi-color-picker-error-color)}.vi-color-picker__swatches{gap:var(--vi-space-2,.5rem);grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.vi-color-picker__swatch{aspect-ratio:1;border:var(--vi-border-width,1px) solid color-mix(in srgb, var(--vi-standby-text) 24%, transparent);border-radius:min(var(--vi-radius), 5px);min-width:0;transition:box-shadow var(--vi-motion-duration-fast,.12s) var(--vi-motion-ease-out,ease-out), transform var(--vi-motion-duration-fast,.12s) var(--vi-motion-ease-out,ease-out);box-shadow:inset 0 0 0 1px #0000001f}.vi-color-picker__swatch:hover,.vi-color-picker__swatch:focus-visible{outline:0;transform:translateY(-2px)}.vi-color-picker__swatch[aria-pressed=true]{box-shadow:inset 0 0 0 1px #0000001f, 0 0 0 var(--vi-focus-width,2px) var(--vi-color-picker-focus-color)}.vi-color-picker[data-disabled=true]{opacity:var(--vi-color-picker-disabled-opacity)}@media (prefers-reduced-motion:reduce){.vi-color-picker__caret,.vi-color-picker__swatch{transition-duration:.01ms}.vi-color-picker__swatch:hover,.vi-color-picker__swatch:focus-visible{transform:none}}