.ds-colorpicker{align-items:flex-start;gap:var(--gap-sm);flex-direction:column;display:inline-flex;position:relative}.ds-colorpicker__trigger{align-items:center;gap:var(--gap-sm);padding:var(--padding-xxs);border:var(--border-xs) solid var(--color-input-border-primary);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--motion-duration-base) var(--motion-ease-standard);background-color:#0000;display:inline-flex}.ds-colorpicker__trigger:hover:not(:disabled){border-color:var(--color-input-border-hover)}.ds-colorpicker__trigger:focus-visible{border-color:var(--color-input-border-selected);outline:none}.ds-colorpicker--open .ds-colorpicker__trigger{border-color:var(--color-input-border-selected)}.ds-colorpicker__trigger-swatch{border-radius:var(--radius-sm);background-color:var(--color-bg-page-primary);background-image:linear-gradient(var(--ds-cp-color), var(--ds-cp-color)), repeating-conic-gradient(var(--color-bg-container-tertiary) 0% 25%, transparent 0% 50%);width:24px;height:24px;box-shadow:inset 0 0 0 var(--border-xs) var(--color-bg-container-border);background-size:100% 100%,8px 8px;flex-shrink:0}.ds-colorpicker__trigger-text{font-family:var(--font-paragraph-sm-family);font-size:var(--font-paragraph-sm-size);line-height:var(--font-paragraph-sm-line-height);color:var(--color-text-primary);font-variant-numeric:tabular-nums;padding-right:var(--padding-xxs)}.ds-colorpicker--compact .ds-colorpicker__trigger-swatch{width:20px;height:20px}.ds-colorpicker__panel{margin-top:var(--gap-xxs);width:240px;padding:var(--padding-sm-md);gap:var(--gap-sm-md);background-color:var(--color-bg-page-primary);border:var(--border-xs) solid var(--color-input-border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-floating);z-index:10;flex-direction:column;display:flex;position:absolute;top:100%;left:0}.ds-colorpicker__saturation{border-radius:var(--radius-sm);cursor:crosshair;touch-action:none;background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(var(--ds-cp-hue) 100% 50%);height:150px;position:relative}.ds-colorpicker__saturation:focus-visible{outline:var(--border-md) solid var(--color-input-border-selected);outline-offset:var(--border-md)}.ds-colorpicker__handle{left:var(--ds-cp-x);top:var(--ds-cp-y);border-radius:var(--radius-full);border:var(--border-md) solid #fff;width:14px;height:14px;box-shadow:var(--shadow-floating);pointer-events:none;position:absolute;transform:translate(-50%,-50%)}.ds-colorpicker__controls{align-items:center;gap:var(--gap-sm-md);display:flex}.ds-colorpicker__sliders{gap:var(--gap-sm);flex-direction:column;flex:1;min-width:0;display:flex}.ds-colorpicker__hue,.ds-colorpicker__alpha{appearance:none;border-radius:var(--radius-full);cursor:pointer;outline:none;width:100%;height:12px}.ds-colorpicker__hue{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.ds-colorpicker__alpha{background-color:var(--color-bg-page-primary);background-image:linear-gradient(to right, transparent, var(--ds-cp-solid)), repeating-conic-gradient(var(--color-bg-container-tertiary) 0% 25%, transparent 0% 50%);background-size:100% 100%,8px 8px}.ds-colorpicker__hue::-webkit-slider-thumb{appearance:none;border-radius:var(--radius-full);border:var(--border-xs) solid var(--color-bg-container-border);width:16px;height:16px;box-shadow:var(--shadow-floating);background:#fff}.ds-colorpicker__alpha::-webkit-slider-thumb{appearance:none;border-radius:var(--radius-full);border:var(--border-xs) solid var(--color-bg-container-border);width:16px;height:16px;box-shadow:var(--shadow-floating);background:#fff}.ds-colorpicker__hue::-moz-range-thumb{border-radius:var(--radius-full);border:var(--border-xs) solid var(--color-bg-container-border);width:16px;height:16px;box-shadow:var(--shadow-floating);background:#fff}.ds-colorpicker__alpha::-moz-range-thumb{border-radius:var(--radius-full);border:var(--border-xs) solid var(--color-bg-container-border);width:16px;height:16px;box-shadow:var(--shadow-floating);background:#fff}.ds-colorpicker__hue:focus-visible,.ds-colorpicker__alpha:focus-visible{outline:var(--border-md) solid var(--color-input-border-selected);outline-offset:var(--border-md)}.ds-colorpicker__preview{border-radius:var(--radius-sm);background-color:var(--color-bg-page-primary);background-image:linear-gradient(var(--ds-cp-color), var(--ds-cp-color)), repeating-conic-gradient(var(--color-bg-container-tertiary) 0% 25%, transparent 0% 50%);width:32px;height:32px;box-shadow:inset 0 0 0 var(--border-xs) var(--color-bg-container-border);background-size:100% 100%,8px 8px;flex-shrink:0}.ds-colorpicker__inputs{align-items:center;gap:var(--gap-sm);padding:var(--padding-xxs) var(--padding-sm);border:var(--border-xs) solid var(--color-input-border-primary);border-radius:var(--radius-md);transition:border-color var(--motion-duration-base) var(--motion-ease-standard);display:flex}.ds-colorpicker__inputs:focus-within{border-color:var(--color-input-border-selected)}.ds-colorpicker__hash{font-family:var(--font-paragraph-sm-family);font-size:var(--font-paragraph-sm-size);color:var(--color-text-tertiary)}.ds-colorpicker__hex-field{min-width:0;font-family:var(--font-paragraph-sm-family);font-size:var(--font-paragraph-sm-size);line-height:var(--font-paragraph-sm-line-height);color:var(--color-text-primary);text-transform:uppercase;font-variant-numeric:tabular-nums;background:0 0;border:none;outline:none;flex:1;padding:0}.ds-colorpicker__alpha-value{font-family:var(--font-paragraph-sm-family);font-size:var(--font-paragraph-sm-size);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.ds-colorpicker--disabled .ds-colorpicker__trigger{opacity:.4;cursor:not-allowed}.ds-colorpicker--error .ds-colorpicker__trigger{border-color:var(--color-status-error-border)}