.color-picker__picker .react-colorful__interactive:focus-visible{outline:1px solid var(--primary-text);outline-offset:-1px}.color-picker__swatch{width:var(--icon-base);height:var(--icon-base);border:.5px solid var(--border-3);border-radius:var(--radius-inner);flex:none}.color-picker__picker.react-colorful{width:100%;height:clamp(7rem, calc(var(--available-height,32rem) - 9rem), 12rem);flex:none;gap:.5rem}.color-picker__picker .react-colorful__saturation{border-radius:var(--radius);box-shadow:inset 0 0 0 .5px var(--border-2);border-bottom:0}.color-picker__picker .react-colorful__hue{height:var(--icon-base);border-radius:var(--radius);flex:none;margin-block:.125rem}.color-picker__picker .react-colorful__hue .react-colorful__interactive{inset-block:-.5rem}.color-picker__picker .react-colorful__pointer{width:var(--icon-sm);height:var(--icon-sm);border:2px solid var(--fg);box-shadow:0 0 0 1px var(--bg), var(--sh-plate);background:0 0;border-radius:50%}.color-picker__picker .react-colorful__saturation-pointer .react-colorful__pointer-fill{display:none}.color-picker__picker .react-colorful__hue-pointer{width:var(--icon-lg);height:var(--icon-lg);border:3px solid var(--overlay-fg);box-shadow:var(--sh-plate)}.color-picker__picker .react-colorful__hue-pointer .react-colorful__pointer-fill{border-radius:inherit}.color-picker__picker .react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%)}.color-picker__input{font-variant-numeric:tabular-nums}@media (pointer:coarse){.color-picker__picker.react-colorful{gap:1rem}.color-picker__picker .react-colorful__hue{margin-block:.25rem}.color-picker__picker .react-colorful__hue .react-colorful__interactive{inset-block:-1.125rem}}