:root{--atom-color-picker-panel-width:240px;--atom-color-picker-saturation-height:160px;--atom-color-picker-slider-height:12px;--atom-color-picker-thumb-size:var(--atom-control-interactive-size);--atom-color-picker-preset-size:24px;--atom-color-picker-panel-padding:var(--atom-spacing-sm);--atom-color-picker-gap:var(--atom-spacing-xs)}.atom-color-picker-trigger{appearance:none;display:inline-flex;align-items:center;gap:var(--atom-spacing-sm);padding:var(--atom-spacing-xxs);background:var(--atom-color-bg-container);border:var(--atom-border-width) var(--atom-border-style) var(--atom-color-border);border-radius:var(--atom-border-radius);cursor:pointer;transition:border-color var(--atom-transition-fast);font:inherit}.atom-color-picker-trigger:hover:not(.atom-color-picker-trigger-disabled){border-color:var(--atom-primary-color)}.atom-color-picker-trigger-disabled{cursor:not-allowed;opacity:.4}.atom-color-picker-trigger-color{display:block;width:calc(var(--atom-control-height-md) - var(--atom-spacing-md));height:calc(var(--atom-control-height-md) - var(--atom-spacing-md));border-radius:var(--atom-border-radius-sm);background-image:linear-gradient(45deg,#ddd 25%,transparent 0),linear-gradient(-45deg,#ddd 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ddd 0),linear-gradient(-45deg,transparent 75%,#ddd 0);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.atom-color-picker-trigger-color-inner{display:block;width:100%;height:100%;border-radius:inherit}.atom-color-picker-trigger-sm .atom-color-picker-trigger-color{width:calc(var(--atom-control-height-sm) - var(--atom-spacing-md));height:calc(var(--atom-control-height-sm) - var(--atom-spacing-md))}.atom-color-picker-trigger-lg .atom-color-picker-trigger-color{width:calc(var(--atom-control-height-lg) - var(--atom-spacing-md));height:calc(var(--atom-control-height-lg) - var(--atom-spacing-md))}.atom-color-picker-trigger-text{color:var(--atom-color-text);font-size:var(--atom-font-size-md,14px);line-height:1;-webkit-user-select:all;user-select:all}.atom-color-picker-trigger-clear{display:inline-flex;align-items:center;color:var(--atom-color-text-quaternary);cursor:pointer;font-size:var(--atom-font-size-sm,14px);transition:color var(--atom-transition-fast)}.atom-color-picker-trigger-clear:hover{color:var(--atom-color-text-secondary)}.atom-color-picker-panel{display:flex;flex-direction:column;gap:var(--atom-color-picker-gap);width:var(--atom-color-picker-panel-width);padding:var(--atom-color-picker-panel-padding)}.atom-color-picker-saturation{position:relative;width:100%;height:var(--atom-color-picker-saturation-height);border-radius:var(--atom-border-radius);overflow:hidden;cursor:crosshair;touch-action:none}.atom-color-picker-saturation canvas{display:block;width:100%;height:100%}.atom-color-picker-thumb{position:absolute;width:var(--atom-color-picker-thumb-size);height:var(--atom-color-picker-thumb-size);border:var(--atom-spacing-xxs) solid var(--atom-color-white,#fff);border-radius:50%;box-shadow:var(--atom-shadow-sm);transform:translate(-50%,-50%);pointer-events:none}.atom-color-picker-slider{position:relative;width:100%;height:var(--atom-color-picker-slider-height);border-radius:calc(var(--atom-color-picker-slider-height)/2);cursor:pointer;touch-action:none}.atom-color-picker-slider-thumb{position:absolute;top:50%;width:var(--atom-color-picker-thumb-size);height:var(--atom-color-picker-thumb-size);border:var(--atom-spacing-xxs) solid var(--atom-color-white,#fff);border-radius:50%;box-shadow:var(--atom-shadow-sm);transform:translate(-50%,-50%);pointer-events:none;background:var(--atom-color-white,#fff)}.atom-color-picker-hue{background:linear-gradient(90deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(0,100%,50%))}.atom-color-picker-alpha{background-image:linear-gradient(45deg,#ddd 25%,transparent 0),linear-gradient(-45deg,#ddd 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ddd 0),linear-gradient(-45deg,transparent 75%,#ddd 0);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.atom-color-picker-alpha-gradient{width:100%;height:100%;border-radius:inherit}.atom-color-picker-panel .atom-input-wrapper{font-family:var(--atom-font-family-code)}.atom-color-picker-presets-label{color:var(--atom-color-text-secondary);font-size:var(--atom-font-size-sm,14px);margin-bottom:var(--atom-spacing-xxs)}.atom-color-picker-presets-grid{display:flex;flex-wrap:wrap;gap:var(--atom-spacing-xs)}.atom-color-picker-presets-swatch{appearance:none;width:var(--atom-color-picker-preset-size);height:var(--atom-color-picker-preset-size);border:var(--atom-border-width) var(--atom-border-style) var(--atom-color-border);border-radius:var(--atom-border-radius-sm);cursor:pointer;padding:0;transition:transform var(--atom-transition-fast)}.atom-color-picker-presets-swatch:hover{transform:scale(1.15)}.atom-color-picker-presets-swatch-active{box-shadow:0 0 0 var(--atom-spacing-xxs) var(--atom-primary-color)}.atom-color-picker-presets+.atom-color-picker-presets{margin-top:var(--atom-spacing-xs);padding-top:var(--atom-spacing-xs);border-top:var(--atom-border-width) var(--atom-border-style) var(--atom-color-border-secondary)}[data-theme=dark] .atom-color-picker-trigger{background:var(--atom-color-bg-container);border-color:var(--atom-color-border)}