:host{contain:layout style paint;background-color:var(--gray-200,#e5e7eb);--_badge-color:var(--color-text,#1f2937);width:fit-content;min-width:1.5em;max-width:100%;color:var(--_badge-color);font-size:var(--step--2,.875rem);white-space:nowrap;text-overflow:ellipsis;border:1px solid #0000;border-radius:9999px;justify-content:center;align-items:center;padding:.125em .5em;font-weight:600;line-height:1.4;transition:background-color .2s,color .2s,border-color .2s;display:inline-flex;overflow:hidden}:host([primary]){background-color:var(--color-primary);--_badge-color:#fff}@media (prefers-reduced-motion:reduce){:host{transition:none}}:host([color=primary]){background-color:var(--color-primary);--_badge-color:#fff}:host([color=secondary]){background-color:var(--color-secondary);--_badge-color:#fff}:host([color=success]){background-color:var(--color-success,#22c55e);--_badge-color:#fff}:host([color=warning]){background-color:var(--color-warning,#f59e0b);--_badge-color:#fff}:host([color=error]){background-color:var(--color-error,#ef4444);--_badge-color:#fff}:host([size=small]){font-size:var(--step--3,.75rem);padding:.0625em .375em}:host([size=xs]){font-size:var(--step--4,.625rem);padding:.125em .3em}:host([size=normal]){font-size:1em}:host([size=large]){font-size:var(--step--1,1rem);padding:.1875em .625em}:host([variant=outlined]){border:1px solid var(--gray-400);--_badge-color:var(--color-text);background-color:#0000}:host([variant=outlined][color=primary]){border-color:var(--color-primary);--_badge-color:var(--color-primary);background-color:#0000}:host([variant=outlined][color=secondary]){border-color:var(--color-secondary);--_badge-color:var(--color-secondary);background-color:#0000}:host([variant=outlined][color=success]){border-color:var(--color-success,#22c55e);--_badge-color:var(--color-success,#22c55e);background-color:#0000}:host([variant=outlined][color=warning]){border-color:var(--color-warning,#f59e0b);--_badge-color:var(--color-warning,#f59e0b);background-color:#0000}:host([variant=outlined][color=error]){border-color:var(--color-error,#ef4444);--_badge-color:var(--color-error,#ef4444);background-color:#0000}:host([align=middle]){vertical-align:middle}:host([align=baseline]){vertical-align:baseline}:host([align=top]){vertical-align:top}:host([align=bottom]){vertical-align:bottom}span,::slotted(*){color:var(--_badge-color)}@media (forced-colors:active){:host{border:1px solid}}