:root{--s-color-picker-checker-bg:repeating-conic-gradient(from 0deg, #ccc 0deg 90deg, transparent 90deg 180deg) center/12px 12px;--s-color-picker-panel-height:160px;--s-color-picker-preview-size:40px;--s-color-picker-value-size:24px;--s-color-picker-slider-bar-height:16px;--s-color-picker-thumb-size:18px;--s-color-picker-preset-size:24px}.s-color-picker{display:flex;flex-direction:column;gap:12px}.s-color-picker__panel{position:relative;height:var(--s-color-picker-panel-height);border-radius:var(--s-border-radius-lg);overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none}.s-color-picker__thumb{position:absolute;top:50%;width:var(--s-color-picker-thumb-size);height:var(--s-color-picker-thumb-size);border:2px solid var(--s-white);border-radius:var(--s-border-radius-full);box-shadow:0 0 0 1px rgba(0,0,0,.12);background:rgba(0,0,0,0);transform:translate(-50%, -50%);z-index:1;cursor:pointer}.s-color-picker__slider-bar{position:relative;height:var(--s-color-picker-slider-bar-height);border-radius:var(--s-border-radius-full);cursor:pointer;-webkit-user-select:none;user-select:none}.s-color-picker__slider-bar--alpha{background:var(--s-color-picker-checker-bg)}.s-color-picker__slider-bar--hue{background:linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)}.s-color-picker__alpha-fill{width:100%;height:100%;border-radius:inherit}.s-color-picker__info{display:flex;align-items:center;gap:8px}.s-color-picker__preview{flex:none;width:var(--s-color-picker-preview-size);height:var(--s-color-picker-preview-size);border-radius:var(--s-border-radius-full);border:1px solid var(--s-border-color);background:var(--s-color-picker-checker-bg);overflow:hidden}.s-color-picker__preview-fill{width:100%;height:100%}.s-color-picker__value{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;height:var(--s-color-picker-value-size);padding:0 10px;font-size:var(--s-font-size-sm);white-space:nowrap;border:1px solid var(--s-border-color);border-radius:var(--s-border-radius)}.s-color-picker__format{display:flex;align-items:center;justify-content:center;flex:none;height:var(--s-color-picker-value-size);padding:0 10px;gap:4px;border-radius:var(--s-border-radius-sm);font-size:var(--s-font-size-sm);cursor:pointer}.s-color-picker__format:active{background:var(--s-bg-color-active)}.s-color-picker__format--active{background:var(--s-bg-color-active)}.s-color-picker__presets{display:flex;flex-wrap:wrap;gap:8px}.s-color-picker__preset{width:var(--s-color-picker-preset-size);height:var(--s-color-picker-preset-size);border-radius:var(--s-border-radius);border:1px solid var(--s-border-color);background:var(--s-color-picker-checker-bg);overflow:hidden;cursor:pointer}.s-color-picker__preset--active{box-shadow:0 0 0 2px rgba(var(--s-color-primary-rgb), 0.25)}.s-color-picker__preset-fill{width:100%;height:100%}.s-color-picker--disabled .s-color-picker__panel,.s-color-picker--disabled .s-color-picker__slider-bar,.s-color-picker--disabled .s-color-picker__thumb,.s-color-picker--disabled .s-color-picker__format,.s-color-picker--disabled .s-color-picker__preset,.s-color-picker--readonly .s-color-picker__panel,.s-color-picker--readonly .s-color-picker__slider-bar,.s-color-picker--readonly .s-color-picker__thumb,.s-color-picker--readonly .s-color-picker__format,.s-color-picker--readonly .s-color-picker__preset{pointer-events:none}.s-color-picker--disabled{opacity:var(--s-opacity-disabled)}