.color-picker{display:grid;gap:8px}
.color-picker__trigger{width:100%;min-height:48px;border:1px solid var(--border);border-radius:0;padding:0 12px;display:flex;align-items:center;gap:10px;background:var(--white);color:var(--text);font:inherit;text-align:left}
.color-picker__swatch{width:28px;height:28px;border:1px solid var(--border);border-radius:50%;flex:0 0 28px}
.color-picker__palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:6px 0}
.color-picker__option{width:100%;aspect-ratio:1;border:1px solid var(--border);border-radius:0;padding:5px;background:var(--white)}
.color-picker__option span{display:block;width:100%;height:100%;border-radius:10px;border:1px solid rgba(17,17,17,.08)}
.color-picker__option.is-selected{outline:2px solid var(--text);outline-offset:2px}