@layer warp.components{:where([data-scope=tag]){border:var(--warp-border-hairline) solid var(--_border,var(--warp-color-border));border-radius:var(--warp-radius-control);background:var(--warp-color-surface-raised);block-size:24px;color:var(--warp-color-text);font-size:var(--warp-text-caption-size);align-items:center;gap:4px;padding-inline:8px 4px;display:inline-flex}:where([data-scope=tag]:not(:has([data-part=remove]))){padding-inline-end:8px}:where([data-scope=tag])>:where([data-part=swatch]){background:var(--_solid);border-radius:2px;block-size:8px;inline-size:8px}:where([data-scope=tag]) :where([data-part=remove]){border-radius:var(--warp-radius-mark);block-size:18px;inline-size:18px;color:var(--warp-color-text-subtle);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:grid;position:relative}:where([data-scope=tag]) :where([data-part=remove]):after{content:"";inset:min(0px, calc((100% - var(--warp-hit-min)) / 2));position:absolute}:where([data-scope=tag]) :where([data-part=remove]:hover){background:color-mix(in oklab, currentColor 12%, transparent);color:var(--warp-color-text)}:where([data-scope=tag]) :where([data-part=remove]) :where(svg){block-size:12px;inline-size:12px}:where([data-scope=tag][data-state=removed]){animation:warp-exit calc(var(--warp-duration-fast) * var(--warp-duration-exit-k)) var(--warp-ease-in) forwards}}