.ui-color-swatches { min-width: 0; margin: 0; padding: 0; border: 0; font: 14px/1.4 var(--ui-font); color: var(--ui-fg); }
.ui-color-swatches-legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.ui-color-swatches-req { margin-left: 2px; color: var(--ui-danger); }
.ui-color-swatches-list { display: flex; flex-wrap: wrap; gap: 10px; }
.ui-color-swatches-opt { position: relative; display: grid; justify-items: center; gap: 4px; cursor: pointer; }
.ui-color-swatches-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ui-color-swatches-chip {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-fg) 18%, transparent); transition: transform .12s, box-shadow .15s;
}
.ui-color-swatches-chip svg { width: 14px; height: 14px; opacity: 0; color: #fff; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .7)); transition: opacity .12s; }
.ui-color-swatches-opt:hover .ui-color-swatches-chip { transform: scale(1.08); }
.ui-color-swatches-opt input:checked + .ui-color-swatches-chip { box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-accent); }
.ui-color-swatches-opt input:checked + .ui-color-swatches-chip svg { opacity: 1; }
.ui-color-swatches-opt input:focus-visible + .ui-color-swatches-chip { box-shadow: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-accent), var(--ui-focus); }
.ui-color-swatches-opt:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.ui-color-swatches-opt:has(input:disabled):hover .ui-color-swatches-chip { transform: none; }
.ui-color-swatches-opt:has(input:disabled) .ui-color-swatches-chip::after {
  content: ""; width: 30px; height: 2px; background: var(--ui-fg); transform: rotate(-45deg); border-radius: 1px;
}
.ui-color-swatches-name { font-size: 12px; color: var(--ui-muted); max-width: 72px; text-align: center; }
.ui-color-swatches-opt input:checked ~ .ui-color-swatches-name { color: var(--ui-fg); font-weight: 500; }
.ui-color-swatches-sm .ui-color-swatches-chip { width: 20px; height: 20px; }
.ui-color-swatches-sm .ui-color-swatches-chip svg { width: 10px; height: 10px; }
.ui-color-swatches-lg .ui-color-swatches-chip { width: 38px; height: 38px; }
.ui-color-swatches-lg .ui-color-swatches-chip svg { width: 18px; height: 18px; }
.ui-color-swatches-invalid .ui-color-swatches-chip { box-shadow: 0 0 0 2px var(--ui-danger); }
.ui-color-swatches-hint, .ui-color-swatches-error { margin: 8px 0 0; font-size: 13px; color: var(--ui-muted); }
.ui-color-swatches-error { color: var(--ui-danger); }
@media (prefers-reduced-motion: reduce) { .ui-color-swatches-chip, .ui-color-swatches-chip svg { transition: none; } }