@layer components{[data-ui=badge]{height:var(--badge-size);width:fit-content;padding-inline:var(--spacing-6);border:1px solid #0000;justify-content:center;align-items:center;display:inline-flex}[data-ui=badge][data-shape=rounded]{border-radius:var(--radius-rounded)}[data-ui=badge][data-shape=smoothed]{border-radius:var(--radius-xs)}[data-ui=badge] svg{width:var(--icon-size);height:var(--icon-size)}[data-ui=badge][data-doted]:before{content:"";clip-path:circle();width:var(--dot-size);height:var(--dot-size);background-color:currentColor;display:block}[data-ui=badge][data-size=lg]{--icon-size:20px;--badge-size:24px;--dot-size:8px;gap:var(--spacing-8);font:var(--font-label-lg)}[data-ui=badge][data-size=lg]>[data-ui=badge-dot]{margin-inline:calc(var(--spacing-8) * -1)}[data-ui=badge][data-size=md]{--icon-size:16px;--badge-size:20px;--dot-size:6px;gap:var(--spacing-6);font:var(--font-label-md)}[data-ui=badge][data-size=md]>[data-ui=badge-dot]{margin-inline:calc(var(--spacing-6) * -1)}[data-ui=badge][data-size=sm]{--icon-size:12px;--badge-size:16px;--dot-size:4px;font:var(--font-label-sm);gap:var(--spacing-8)}[data-ui=badge][data-size=sm]>[data-ui=badge-dot]{margin-inline:calc(var(--spacing-8) * -1)}[data-ui=badge][data-variant=primary]{--color-badge:var(--color-primary-container);--color-on-badge:var(--color-on-primary-container);--color-badge-border:var(--color-primary)}[data-ui=badge][data-mode=filled]{background-color:var(--color-badge);color:var(--color-on-badge)}[data-ui=badge][data-mode=filled] svg{fill:var(--color-on-badge)}[data-ui=badge][data-mode=light],[data-ui=badge][data-mode=lighter]{background-color:color-mix(in srgb, var(--color-badge) var(--badge-lightness), var(--color-surface));color:color-mix(in srgb, var(--color-badge), var(--color-on-badge))}:is([data-ui=badge][data-mode=light],[data-ui=badge][data-mode=lighter]) svg{fill:color-mix(in srgb, var(--color-badge), var(--color-on-badge))}[data-ui=badge][data-mode=light]{--badge-lightness:60%}[data-ui=badge][data-mode=lighter]{--badge-lightness:40%}[data-ui=badge][data-mode=stroke]{color:var(--color-on-badge);border-color:currentColor}[data-ui=badge][data-mode=stroke] svg{fill:var(--color-on-badge)}[data-ui=badge][aria-disabled=true]{border-color:var(--color-surface-container-highest);color:color-mix(in srgb, var(--color-on-surface) 38%, transparent);pointer-events:none;background-color:#0000}}