@layer components{.badge{letter-spacing:.01em;white-space:nowrap;border-radius:9999px;flex-shrink:0;align-items:center;padding:.125rem .625rem;font-size:.6875rem;font-weight:500;line-height:1.5rem;display:inline-flex;&[data-size=xs]{padding:0 .375rem;font-size:.5625rem;line-height:1.125rem}&[data-size=sm]{padding:.0625rem .5rem;font-size:.625rem;line-height:1.25rem}&[data-size=md]{padding:.125rem .625rem;font-size:.6875rem;line-height:1.5rem}&[data-size=lg]{padding:.1875rem .75rem;font-size:.8125rem;line-height:1.75rem}&[data-size=xl]{padding:.25rem .875rem;font-size:.9375rem;line-height:2rem}&[data-variant=outline]{border:1px solid var(--border);color:var(--muted-foreground)}&[data-variant=secondary]{background:var(--secondary);color:var(--secondary-foreground)}&[data-variant=default]{background:var(--primary);color:var(--primary-foreground)}&[data-variant=destructive]{background:var(--destructive);color:var(--destructive-foreground)}}}