.color-picker-field{position:relative}.color-picker-field__controls{display:flex;align-items:center;gap:.75rem}.color-picker-field__swatch{width:3.5rem;height:3.5rem;border-radius:6px;border:2px solid var(--theme-elevation-150);cursor:pointer;flex-shrink:0;padding:0;position:relative;overflow:hidden;background:repeating-conic-gradient(#d0d0d0 0 25%,#fff 0 50%) 50% /10px 10px}.color-picker-field__swatch-color{position:absolute;inset:0;border-radius:inherit}.color-picker-field__input{width:7.5rem;padding:.4rem .6rem;font-family:var(--font-mono);font-size:.8125rem;border:1px solid var(--theme-elevation-150);border-radius:4px;background:var(--theme-elevation-0);color:var(--theme-elevation-1000);outline:none}.color-picker-field__input:focus{border-color:var(--theme-elevation-400)}.color-picker-field__highlight-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex-shrink:0;border:none;border-radius:4px;background:transparent;color:var(--theme-elevation-400);cursor:pointer;transition:color .15s,background .15s}.color-picker-field__highlight-btn:hover{color:#ff00ff;background:var(--theme-elevation-100)}.color-picker-field__clear-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex-shrink:0;border:none;border-radius:4px;background:transparent;color:var(--theme-elevation-400);cursor:pointer;transition:color .15s,background .15s}.color-picker-field__clear-btn:hover{color:var(--theme-error-500,#ee7d77);background:var(--theme-elevation-100)}.color-picker-field__swatch--empty{border-style:dashed}.color-picker-field__popover{position:absolute;top:calc(100% + .5rem);left:0;z-index:100;background:var(--theme-elevation-50);border:1px solid var(--theme-elevation-150);border-radius:8px;padding:.75rem;box-shadow:0 8px 24px rgba(0,0,0,.15)}.color-picker-field__popover .react-colorful{width:200px;height:200px}.color-picker-field__popover .react-colorful__saturation{border-radius:4px 4px 0 0}.color-picker-field__popover .react-colorful__last-control{border-radius:0 0 4px 4px}