.badge{--glass-fg:var(--badge-fg);--glass-tint:var(--badge-tint);align-items:center;gap:var(--space-1);padding-block:var(--space-1);padding-inline:var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--size-micro);line-height:var(--leading-micro);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;vertical-align:middle;color:var(--badge-fg);-webkit-user-select:none;user-select:none;display:inline-flex}.badge--sm{gap:var(--space-px);padding-block:0}.badge--pill{border-radius:var(--radius-full)}.badge__dot{border-radius:var(--radius-full);background:var(--badge-dot,var(--badge-fg));width:.5em;height:.5em;transition:background-color var(--duration-base) var(--ease-standard);flex:none;position:relative}.badge__dot--live:after{content:"";border-radius:inherit;background:inherit;animation:badge-pulse var(--duration-pulse) var(--ease-entrance) infinite;position:absolute;inset:0}@keyframes badge-pulse{0%{opacity:.5;transform:scale(1)}70%{opacity:0;transform:scale(2.6)}to{opacity:0;transform:scale(2.6)}}.badge__icon{width:1em;height:1em;margin-left:calc(var(--space-px) * -1);flex:none;display:inline-flex}.badge__icon svg{width:100%;height:100%;display:block}.badge--neutral{--badge-fg:var(--text-muted);--badge-tint:var(--glass-tint-neutral);--badge-dot:var(--gray-500)}.badge--info{--badge-fg:var(--info-text);--badge-tint:var(--glass-tint-info);--badge-dot:var(--info)}.badge--success{--badge-fg:var(--success-text);--badge-tint:var(--glass-tint-success);--badge-dot:var(--success)}.badge--warning{--badge-fg:var(--warning-text);--badge-tint:var(--glass-tint-warning);--badge-dot:var(--warning)}.badge--danger{--badge-fg:var(--danger-text);--badge-tint:var(--glass-tint-danger);--badge-dot:var(--danger)}.badge--outline{isolation:isolate;box-shadow:inset 0 0 0 var(--border-hairline) color-mix(in oklab, var(--badge-fg) 30%, transparent), inset 0 1px 0 0 #ffffff80, var(--shadow-xs);transition:transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);background:0 0;position:relative}.badge--outline .badge__dot{box-shadow:0 0 0 2.5px color-mix(in oklab, var(--badge-dot) 16%, transparent)}.badge--outline:hover{transform:translateY(calc(var(--space-px) * -1));background:color-mix(in oklab, var(--badge-fg) 7%, transparent);box-shadow:inset 0 0 0 var(--border-hairline) color-mix(in oklab, var(--badge-fg) 42%, transparent), inset 0 1px 0 0 #fff9, var(--shadow-sm)}.badge__morph{transition:width var(--duration-base) var(--ease-entrance);place-items:center start;display:inline-grid;position:relative;overflow:hidden}.badge__morph>*{grid-area:1/1}.badge__ghost{visibility:hidden;pointer-events:none}.badge__word{transition:transform var(--duration-base) var(--ease-entrance), opacity var(--duration-base) var(--ease-standard);display:inline-block}.badge__word--out{opacity:0;transform:translateY(-52%)}.badge__word--in{opacity:0;transition:none;transform:translateY(52%)}@media (prefers-reduced-motion:reduce){.badge--outline{transition:none}.badge--outline:hover{transform:none}.badge__dot--live:after{animation:none}.badge__morph,.badge__word{transition:none}}
