.spx-swatch{--_size:64px;--_radius:var(--radius-md);gap:var(--space-2);min-width:var(--_size);flex-direction:column;display:inline-flex}.spx-swatch__chip{width:var(--_size);height:var(--_size);border-radius:var(--_radius);background:var(--_fill);border:.5px solid var(--border);box-shadow:var(--shadow-sm);display:block}.spx-swatch__caption{gap:var(--space-1);max-width:calc(var(--_size) * 2.4);flex-direction:column;display:flex}.spx-swatch__label{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--tracking-mono);font-weight:var(--weight-medium);color:var(--text);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spx-swatch__value{font-family:var(--font-mono);font-size:var(--text-mono);letter-spacing:var(--tracking-mono);color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spx-swatch--sm{--_size:40px;--_radius:var(--radius-sm)}.spx-swatch--lg{--_size:96px;--_radius:var(--radius-lg)}.spx-swatch--round .spx-swatch__chip{border-radius:var(--radius-full)}