@layer components{:root{--badge-radius:var(--radius-sm);--badge-font-weight:500;--badge-font-size:var(--text-xs);--badge-px:.5rem;--badge-py:.25rem}:where(.badge){background:var(--badge-bg);border-radius:var(--badge-radius);font-weight:var(--badge-font-weight);font-size:var(--badge-font-size);color:var(--badge-text);padding:var(--badge-py) var(--badge-px);border:1px solid var(--badge-border);justify-content:center;align-items:center;gap:calc(var(--gap-default) / 2);display:inline-flex}:where(.badge--primary){--badge-bg:var(--color-brand);--badge-border:var(--color-brand);--badge-text:var(--color-white)}:where(.badge--secondary){--badge-text:var(--color-gray-700);--badge-bg:var(--color-gray-100);--badge-border:var(--color-gray-100)}:where(.badge--destructive){--badge-bg:var(--color-error-500);--badge-border:var(--color-error-500);--badge-text:var(--color-white)}:where(.badge--warning){--badge-bg:var(--color-warning-600);--badge-border:var(--color-warning-600);--badge-text:var(--color-white)}:where(.badge--outline){--badge-text:var(--color-gray-700);--badge-bg:var(--color-white);--badge-border:var(--color-gray-200)}}