@scope([data-example]){[data-slot=color-picker]{--checker:repeating-conic-gradient(var(--line-faint) 0 25%, var(--surface-1) 0 50%) 0 0 / 8px 8px;gap:var(--space-3);flex-direction:column;width:16rem;max-width:100%;display:flex}[data-slot=color-picker]>[data-slot=row]{gap:var(--space-2);flex-wrap:nowrap}[data-slot=color-picker-sliders]{gap:var(--space-3);flex-direction:column;flex:1;min-width:0;display:flex}[data-slot=color-picker]>[data-slot=row]>select{flex:none;width:auto}[data-slot=color-picker-area]{border-radius:var(--radius-control);background:var(--color-area-background,var(--checker));height:10rem;box-shadow:inset 0 0 0 1px var(--line-faint);cursor:crosshair}[data-slot=color-picker-area]:is([data-disabled],[data-readonly]){cursor:default}[data-slot=color-picker-area][data-disabled]{opacity:.5}[data-slot=color-picker-area-canvas]{border-radius:inherit}[data-slot=color-picker-slider]{background:var(--color-slider-background);height:12px;box-shadow:inset 0 0 0 1px var(--line-faint);border-radius:999px}[data-slot=color-picker-slider][data-channel=alpha]{background:var(--color-slider-background), var(--checker)}[data-slot=color-picker-slider][data-disabled]{opacity:.5}[data-slot=row]>[data-slot=color-picker-slider]{flex:1}:is([data-slot=color-picker-area-thumb],[data-slot=color-picker-slider-thumb]){box-sizing:border-box;width:var(--size-icon);height:var(--size-icon);background:var(--color-picker-color);box-shadow:0 0 0 1px #0000004d, var(--shadow-drop);border:2px solid #fff;border-radius:50%;translate:-50% -50%}:is([data-slot=color-picker-area-thumb],[data-slot=color-picker-slider-thumb]):is([dir=rtl],[dir=rtl] *){translate:50% -50%}:is([data-slot=color-picker-area-thumb],[data-slot=color-picker-slider-thumb]):focus-visible{outline:3px solid var(--halo);outline-offset:2px}:is([data-slot=color-picker-area-thumb],[data-slot=color-picker-slider-thumb])[data-out-of-gamut]{border-style:dashed}[data-slot=color-picker-slider-thumb]{translate:calc(var(--color-slider-thumb-position) * -1) -50%;top:50%}[data-slot=color-picker-slider-thumb]:is([dir=rtl],[dir=rtl] *){translate:var(--color-slider-thumb-position) -50%}:is([data-slot=color-picker-swatch],[data-slot=color-picker-swatch-item]){box-sizing:border-box;width:var(--size);height:var(--size);border-radius:var(--radius-control);background:linear-gradient(var(--color-picker-color), var(--color-picker-color)), var(--checker);border:0;flex:none;padding:0;box-shadow:inset 0 0 0 1px #0000001a}[data-slot=color-picker-swatches]{gap:var(--space-2);grid-template-columns:repeat(8,1fr);display:grid}[data-slot=color-picker-swatch-item]{aspect-ratio:1;width:auto;height:auto}[data-slot=color-picker-swatch-item][data-selected]{box-shadow:inset 0 0 0 1px #0000001a, 0 0 0 2px var(--surface-1), 0 0 0 3.5px var(--ink)}[data-slot=color-picker-swatch-item]:focus-visible{outline:3px solid var(--halo);outline-offset:2px}[data-slot=color-picker-input]{width:100%;font-family:var(--mono)}[data-slot=color-picker-channel-input]{padding-inline:var(--space-2);font-variant-numeric:tabular-nums}[data-slot=row] :is([data-slot=color-picker-input],[data-slot=color-picker-channel-input]){flex:1;width:auto;min-width:0}[data-slot=color-picker]:has(>[data-slot=popover-trigger]){width:auto}[data-slot=popover-trigger]:has(>[data-slot=color-picker-swatch]){width:var(--size-lg);padding:4px}[data-slot=popover-trigger]:has(>[data-slot=color-picker-swatch])>[data-slot=color-picker-swatch]{border-radius:calc(var(--radius-control) - 2px);width:100%;height:100%}[data-slot=popover-content]:has([data-slot=color-picker-area]){width:16rem}}