.ds-chip{--chip-color:var(--c-primary);border-radius:var(--r-pill);background:var(--c-surface);min-height:36px;color:var(--c-ink);font-size:var(--fs-sm);white-space:nowrap;box-shadow:inset 0 0 0 1.5px var(--c-line), var(--gloss-top);transition:background-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-press) var(--ease-out);border:none;align-items:center;gap:6px;padding:0 14px;font-weight:600;line-height:1;display:inline-flex}.ds-chip--sm{min-height:28px;font-size:var(--fs-xs);padding:0 10px}.ds-chip__icon{place-items:center;font-size:1.1em;display:inline-grid}.ds-chip.is-clickable{cursor:pointer}.ds-chip.is-clickable:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--c-line-strong), var(--gloss-top);background:var(--c-surface-2)}.ds-chip.is-clickable:active:not(:disabled){transform:scale(.96)}.ds-chip:disabled{opacity:.5;cursor:not-allowed}.ds-chip.is-selected{background:color-mix(in srgb, var(--chip-color) 16%, var(--c-surface));box-shadow:inset 0 0 0 2px var(--chip-color), var(--gloss-top);animation:ds-squish .18s var(--ease-out)}.ds-chip.is-selected.is-clickable:hover:not(:disabled){background:color-mix(in srgb, var(--chip-color) 22%, var(--c-surface));box-shadow:inset 0 0 0 2px var(--chip-color), var(--gloss-top)}
