.component\:chip{--background-color: var(--figma-web-color-white-500);--background-color-active: var(--figma-web-color-blue-300);--color: var(--figma-web-color-black-500);--border-color: var(--figma-web-color-grey-600);--height: 46px;--font-size: 16px;position:relative;background-color:var(--background-color);color:var(--color);display:inline-flex;align-items:center;justify-content:center;gap:0 8px;font-size:var(--font-size);height:var(--height);padding:0 1.25em;border:1px solid var(--border-color);border-radius:var(--height);white-space:nowrap;font-weight:500;cursor:pointer;touch-action:manipulation}.component\:chip:hover:after{content:"";position:absolute;pointer-events:none;top:0;right:0;bottom:0;left:0;background-color:#0000000d;border-radius:inherit}.component\:chip[data-variant=default].active{--background-color: var(--background-color-active);border:2px solid var(--figma-web-color-blue-700);padding-left:.75rem}.component\:chip[data-size=md]{--height: 32px;--font-size: 14px}.component\:chip[data-size=sm]{--height: 24px;--font-size: 12px}@supports (selector(:has(*))){.component\:chip:has(>img:first-child){padding-left:.75em}.component\:chip:has(>img:last-child){padding-right:.75em}}