@layer base{.color-picker{border-radius:var(--radius-box,.5rem);border:var(--border,1px) solid var(--color-base-300);background-color:var(--color-base-100);width:100%;max-width:20rem;color:var(--color-base-content);flex-direction:column;gap:.85rem;padding:.85rem;display:flex}.color-picker-preview{align-items:center;gap:.75rem;display:flex}.color-picker-swatch{border-radius:var(--radius-field,.25rem);width:3.25rem;height:3.25rem;box-shadow:inset 0 0 0 1px var(--color-base-content);flex-shrink:0}@supports (color:color-mix(in lab,red,red)){.color-picker-swatch{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-base-content) 15%,transparent)}}.color-picker-values{font-variant-numeric:tabular-nums;flex-direction:column;gap:.15rem;min-width:0;display:flex}.color-picker-value-oklch{text-overflow:ellipsis;white-space:nowrap;font-size:1rem;font-weight:600;overflow:hidden}.color-picker-value-hex{text-transform:uppercase;letter-spacing:.02em;color:var(--color-base-content);font-size:1rem}.color-picker-sliders{flex-direction:column;gap:.6rem;display:flex}.color-picker-slider{grid-template-columns:1.25rem 1fr 2.75rem;align-items:center;gap:.5rem;display:grid}.color-picker-slider-label{color:var(--color-base-content);font-size:1rem;font-weight:700}.color-picker-slider-value{text-align:right;font-variant-numeric:tabular-nums;color:var(--color-base-content);font-size:1rem}.color-picker-track{cursor:pointer;touch-action:none;height:.9rem;box-shadow:inset 0 0 0 1px var(--color-base-content);border-radius:9999px;position:relative}@supports (color:color-mix(in lab,red,red)){.color-picker-track{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-base-content) 12%,transparent)}}.color-picker-track:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.color-picker-thumb{background-color:var(--color-base-100);width:1.05rem;height:1.05rem;box-shadow:0 0 0 2px var(--color-base-100),0 0 0 3px var(--color-base-content),0 1px 3px #0000004d;border-radius:9999px;position:absolute;top:50%;transform:translate(-50%,-50%)}@supports (color:color-mix(in lab,red,red)){.color-picker-thumb{box-shadow:0 0 0 2px var(--color-base-100),0 0 0 3px color-mix(in oklab,var(--color-base-content) 35%,transparent),0 1px 3px #0000004d}}.color-picker-thumb{pointer-events:none}.color-picker-hex{align-items:center;gap:.5rem;display:flex}.color-picker-hex-label{color:var(--color-base-content);font-size:1rem;font-weight:700}.color-picker-hex-input{min-width:0;height:calc(var(--size-field,.25rem) * 8);border-radius:var(--radius-field,.25rem);border:var(--border,1px) solid var(--color-base-300);background-color:var(--color-base-100);color:inherit;font:inherit;text-transform:uppercase;flex:auto;padding-inline:.6rem;font-size:1rem}.color-picker-hex-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary);outline:0}@supports (color:color-mix(in lab,red,red)){.color-picker-hex-input:focus{box-shadow:0 0 0 2px color-mix(in oklab,var(--color-primary) 25%,transparent)}}.color-picker[data-disabled]{opacity:.6;pointer-events:none}.color-picker-swatch-trigger{border:var(--border,1px) solid var(--color-base-300);border-radius:var(--radius-field,.25rem);background-color:var(--color-base-100);color:inherit;font:inherit;cursor:pointer;align-items:center;gap:.5rem;padding:.25rem;display:inline-flex}.color-picker-swatch-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.color-picker-swatch-trigger[data-disabled]{opacity:.6;pointer-events:none;cursor:default}.color-picker-swatch-trigger-chip{border-radius:var(--radius-field,.25rem);width:1.5rem;height:1.5rem;box-shadow:inset 0 0 0 1px var(--color-base-content);flex-shrink:0}@supports (color:color-mix(in lab,red,red)){.color-picker-swatch-trigger-chip{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--color-base-content) 15%,transparent)}}.color-picker-swatch-trigger-label{font-variant-numeric:tabular-nums;text-transform:uppercase;color:var(--color-base-content);font-size:1rem}.color-picker-popover{box-shadow:none;background-color:#0000;border:none;padding:0}}