.ds-swatch{border-radius:var(--radius-full);background-color:var(--ds-swatch-color);width:24px;height:24px;box-shadow:inset 0 0 0 var(--border-xs) var(--color-bg-container-border);cursor:pointer;transition:box-shadow var(--motion-duration-base) var(--motion-ease-standard);border:none;flex-shrink:0;padding:0}.ds-swatch--compact{width:20px;height:20px}.ds-swatch--square{border-radius:var(--radius-sm)}.ds-swatch--selected{box-shadow:inset 0 0 0 var(--border-xs) var(--color-bg-container-border), 0 0 0 var(--border-md) var(--color-bg-page-primary), 0 0 0 calc(var(--border-md) * 2) var(--color-text-primary)}.ds-swatch:focus-visible{outline:var(--border-md) solid var(--color-input-border-selected);outline-offset:var(--border-md)}.ds-swatch--disabled{opacity:.4;cursor:not-allowed}