:root{--color-border:#ddd}[data-theme=dark]{--color-border:#444}.color-picker-wrapper{box-sizing:border-box;width:100%;padding:10px}.color-picker-wrapper .color-input>*{border-radius:calc(var(--radius) - 2px);border-style:solid;border-width:1px;border-color:hsla(var(--border));height:2.5rem}.color-picker-wrapper .react-colorful{width:180px;height:180px;margin-top:1rem}.color-picker-wrapper .react-colorful .react-colorful__saturation{border-top-left-radius:calc(var(--radius) - 2px);border-top-right-radius:calc(var(--radius) - 2px)}.color-picker-wrapper .react-colorful .react-colorful__hue{border-bottom-right-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px)}.color-picker-basic-color{flex-wrap:wrap;justify-content:space-between;gap:.5rem;display:flex}.color-picker-wrapper button{cursor:pointer;border-radius:calc(var(--radius) - 2px);border-style:solid;border-width:1px;border-color:hsla(var(--border));text-align:left}.color-picker-basic-color button{width:1.5rem;height:1.5rem}.color-picker-basic-color button.active{border-color:#000}[data-theme=dark] .color-picker-basic-color button.active{border-color:#fff}