: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{margin-bottom:12px}.color-picker-wrapper .color-input input{border:1px solid var(--color-border);width:100%;color:inherit;box-sizing:border-box;background-color:#0000;border-radius:6px;padding:8px 12px;font-family:monospace;font-size:14px}.color-picker-wrapper .color-input input:focus{border-color:#0969da;outline:none}.color-picker-wrapper .react-colorful{width:100%;height:180px}.color-picker-wrapper .react-colorful .react-colorful__saturation{border-radius:6px 6px 0 0}.color-picker-wrapper .react-colorful .react-colorful__hue{border-radius:0 0 6px 6px}.basic-colors,.palette-colors{flex-wrap:wrap;justify-content:flex-start;gap:8px;margin:12px 0;display:flex}.color-picker-wrapper button{border:1px solid var(--color-border);cursor:pointer;text-align:left;border-radius:6px}.color-swatch{width:32px;min-width:32px;height:32px;min-height:32px;padding:0}.color-swatch:hover{border-color:#888;transition:all .2s;transform:scale(1.1)}.color-divider{background-color:var(--color-border);height:1px;margin:12px 0}.reset-button{width:100%;color:inherit;background-color:#0000;padding:8px;font-weight:500}.reset-button:hover{background-color:var(--color-border)}