.ds-swatch{gap:var(--space-3);flex-direction:column;min-inline-size:0;display:flex}.ds-swatch-chips{gap:var(--space-1);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.ds-swatch-chip{justify-content:space-between;gap:var(--space-4);min-block-size:96px;padding:var(--space-3);border-radius:var(--radius-lg);font:var(--type-caption);flex-direction:column;display:flex}.ds-swatch-chip:first-child{border-start-start-radius:var(--radius-xl);border-end-start-radius:var(--radius-xl)}.ds-swatch-chip:last-child{border-start-end-radius:var(--radius-xl);border-end-end-radius:var(--radius-xl)}.ds-swatch-value{font-family:var(--font-mono);overflow-wrap:anywhere;font-size:13px;line-height:20px}.ds-swatch-name{justify-content:space-between;align-items:baseline;column-gap:var(--space-3);flex-wrap:wrap;display:flex}.ds-swatch-role{font:var(--type-small);color:var(--text);font-weight:500}.ds-swatch-token{font-family:var(--font-mono);color:var(--text-muted);font-size:13px;line-height:22px}.ds-swatch-grid{gap:var(--space-8) var(--gutter);grid-template-columns:minmax(0,1fr);display:grid}@media (min-width:640px){.ds-swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (forced-colors:active){.ds-swatch-chip{outline:1px solid}}