.Chip{--chip-height:var(--control-md);--chip-padding-x:1.6rem;--chip-content-gap:.8rem;--chip-surface:var(--color-black-4);--chip-ink:var(--color-black-100);--chip-ring:transparent;--chip-dismiss-ink:var(--color-black-40);--chip-collapse-gap:0px;height:var(--chip-height);color:var(--chip-ink);background:var(--chip-surface);white-space:nowrap;box-shadow:inset 0 0 0 .2rem #0000;box-shadow:inset 0 0 0 .2rem var(--chip-ring);scroll-snap-align:start;transition:var(--transition-press), color var(--duration-fast) var(--ease-out-quad), background-color var(--duration-fast) var(--ease-out-quad), box-shadow var(--duration-fast) var(--ease-out-quad);border-radius:1111rem;flex:none;align-items:center;display:inline-flex;position:relative}@media (hover:hover){.Chip:hover{--chip-surface:var(--color-black-8);--chip-dismiss-ink:var(--color-black-100)}}.Chip.sm{--chip-height:var(--control-sm);--chip-padding-x:1.2rem;--chip-content-gap:.6rem}.Chip.choice,.Chip.color,.Chip.toggle{--chip-surface:var(--color-white-100);--chip-ring:var(--color-black-12)}@media (hover:hover){.Chip.choice:hover,.Chip.color:hover,.Chip.toggle:hover{--chip-surface:var(--color-white-100);--chip-ring:var(--color-black-40)}}.Chip.choice.isSelected,.Chip.color.isSelected,.Chip.toggle.isSelected,.Chip.choice:has(.Chip__input:checked),.Chip.color:has(.Chip__input:checked),.Chip.toggle:has(.Switch__input:checked){--chip-ring:var(--color-black-100)}@media (hover:hover){.Chip.choice:has(.Chip__input:checked):hover,.Chip.color:has(.Chip__input:checked):hover,.Chip.toggle:has(.Switch__input:checked):hover,.Chip.choice.isSelected:not(.does-not-exist):hover,.Chip.color.isSelected:not(.does-not-exist):hover,.Chip.toggle.isSelected:not(.does-not-exist):hover{--chip-ring:var(--color-black-100)}}.Chip.filter.isSelected,.Chip.filter:has(.Chip__input:checked){--chip-surface:var(--color-black-100);--chip-ink:var(--color-white-100);--chip-dismiss-ink:var(--color-white-80)}@media (hover:hover){.Chip.filter:has(.Chip__input:checked):hover,.Chip.filter.isSelected:not(.does-not-exist):hover{--chip-surface:var(--color-black-100);--chip-dismiss-ink:var(--color-white-100)}}.Chip.isUnavailable{--chip-ink:var(--color-black-40);--chip-ring:var(--color-black-8)}@media (hover:hover){.Chip.isUnavailable:hover{--chip-ring:var(--color-black-8)}}.Chip.isPopping{animation:Chip_pop var(--duration-fast) var(--ease-out-cubic)}@keyframes Chip_pop{0%{transform:scale(1)}50%{transform:scale(1.04)}to{transform:scale(1)}}.Chip.isDismissing{margin-right:calc(-1 * var(--chip-collapse-gap));opacity:0;pointer-events:none;transition:max-width var(--duration-base) var(--ease-in-out-cubic), margin-right var(--duration-base) var(--ease-in-out-cubic), opacity var(--duration-fast) var(--ease-in-quad);overflow:clip}.Chip__control{gap:var(--chip-content-gap);min-width:0;height:100%;padding:0;padding-left:var(--chip-padding-x);padding-right:var(--chip-padding-x);color:inherit;cursor:pointer;background:0 0;border:0;flex:1;justify-content:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;display:flex}.Chip.hasDismiss .Chip__control{padding-right:0}.Chip__text{align-items:baseline;gap:.4rem;min-width:0;display:flex;position:relative}.Chip__label,.Chip__value{color:inherit}.Chip__hint{color:var(--color-black-40);flex:none}.Chip.filter.isSelected .Chip__hint{color:var(--color-white-80)}.Chip__swatch{background-color:var(--chip-swatch,var(--color-grey-grey-bg));background-image:none;background-image:var(--chip-swatch-image,none);width:2rem;height:2rem;box-shadow:inset 0 0 0 1px var(--color-black-12);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:50%;flex:none}.Chip__switch{flex:none}.Chip.isUnavailable .Chip__text:after{content:"";background:var(--color-black-16);height:.1rem;position:absolute;top:50%;left:0;right:0;transform:rotate(-12deg)}.Chip.isUnavailable .Chip__swatch{opacity:.35}.Chip__dismiss{min-width:var(--tap-min);height:100%;color:var(--chip-dismiss-ink);cursor:pointer;transition:color var(--duration-fast) var(--ease-out-quad);background:0 0;border:0;border-radius:1111rem;flex:none;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.Chip__dismiss:after{content:"";left:0;right:0;top:min(0px, calc((var(--chip-height) - var(--tap-min)) / 2));bottom:min(0px, calc((var(--chip-height) - var(--tap-min)) / 2));position:absolute}.Chip__dismissIcon{width:1.6rem;height:1.6rem}.Chip:has(.Chip__control:focus-visible){outline:.2rem solid var(--color-focus-ring);outline-offset:.2rem}.Chip__dismiss:focus-visible{outline:.2rem solid var(--color-focus-ring);outline-offset:-.2rem}
