@layer design-system.components{.vds-badge{--badge-height:1.5rem;--badge-padding-inline:var(--vds-space-2,.5rem);--badge-gap:var(--vds-space-1,.25rem);--badge-border-width:1px;--badge-radius:var(--vds-radius-badge,9999px);--badge-icon-size:.75rem;--badge-dot-size:.375rem;--badge-font-family:var(--vds-font-sans,ui-sans-serif, system-ui, sans-serif);--badge-font-size:var(--vds-text-xs,.75rem);--badge-font-weight:var(--vds-font-weight-medium,500);--badge-line-height:var(--vds-control-line-height,1.5);--badge-letter-spacing:var(--vds-tracking-normal,0);--badge-transition-duration:var(--vds-duration-fast,.12s);--badge-transition-easing:var(--vds-ease-out,cubic-bezier(0, 0, .2, 1));--badge-focus-ring-color:var(--vds-color-ring,var(--badge-color-solid));--badge-focus-ring-width:2px;--badge-focus-ring-offset:2px;--badge-color-solid:var(--vds-color-primary-solid,#4f46e5);--badge-color-solid-hover:var(--vds-color-primary-solid-hover,#4338ca);--badge-color-on-solid:var(--vds-color-on-primary,#fff);--badge-color-bg:var(--vds-color-primary-bg,#e0e7ff);--badge-color-bg-hover:var(--vds-color-primary-bg-hover,color-mix(in oklch, var(--badge-color-bg), var(--badge-color-solid) 15%));--badge-color-text:var(--vds-color-primary-text,#3730a3);--badge-color-border:var(--badge-color-solid);--badge-color-border-soft:color-mix(in oklch, var(--badge-color-solid) 30%, transparent);--badge-bg:var(--badge-color-bg);--badge-bg-hover:var(--badge-color-bg-hover);--badge-text:var(--badge-color-text);--badge-border:transparent;--badge-dot:var(--badge-color-solid)}.vds-badge[data-color=success]{--badge-color-solid:var(--vds-color-success-solid,#16a34a);--badge-color-solid-hover:var(--vds-color-success-solid-hover,#15803d);--badge-color-on-solid:var(--vds-color-on-success,#fff);--badge-color-bg:var(--vds-color-success-bg,#dcfce7);--badge-color-bg-hover:var(--vds-color-success-bg-hover,color-mix(in oklch, var(--badge-color-bg), var(--badge-color-solid) 15%));--badge-color-text:var(--vds-color-success-text,#166534);--badge-color-border:var(--badge-color-solid);--badge-color-border-soft:color-mix(in oklch, var(--badge-color-solid) 30%, transparent)}.vds-badge[data-color=warning]{--badge-color-solid:var(--vds-color-warning-solid,#f59e0b);--badge-color-solid-hover:var(--vds-color-warning-solid-hover,#d97706);--badge-color-on-solid:var(--vds-color-on-warning,#111);--badge-color-bg:var(--vds-color-warning-bg,#fef3c7);--badge-color-bg-hover:var(--vds-color-warning-bg-hover,color-mix(in oklch, var(--badge-color-bg), var(--badge-color-solid) 15%));--badge-color-text:var(--vds-color-warning-text,#78350f);--badge-color-border:var(--badge-color-solid);--badge-color-border-soft:color-mix(in oklch, var(--badge-color-solid) 30%, transparent)}.vds-badge[data-color=danger]{--badge-color-solid:var(--vds-color-danger-solid,#dc2626);--badge-color-solid-hover:var(--vds-color-danger-solid-hover,#b91c1c);--badge-color-on-solid:var(--vds-color-on-danger,#fff);--badge-color-bg:var(--vds-color-danger-bg,#fee2e2);--badge-color-bg-hover:var(--vds-color-danger-bg-hover,color-mix(in oklch, var(--badge-color-bg), var(--badge-color-solid) 15%));--badge-color-text:var(--vds-color-danger-text,#991b1b);--badge-color-border:var(--badge-color-solid);--badge-color-border-soft:color-mix(in oklch, var(--badge-color-solid) 30%, transparent)}.vds-badge[data-color=info]{--badge-color-solid:var(--vds-color-info-solid,#0891b2);--badge-color-solid-hover:var(--vds-color-info-solid-hover,#0e7490);--badge-color-on-solid:var(--vds-color-on-info,#fff);--badge-color-bg:var(--vds-color-info-bg,#cffafe);--badge-color-bg-hover:var(--vds-color-info-bg-hover,color-mix(in oklch, var(--badge-color-bg), var(--badge-color-solid) 15%));--badge-color-text:var(--vds-color-info-text,#155e75);--badge-color-border:var(--badge-color-solid);--badge-color-border-soft:color-mix(in oklch, var(--badge-color-solid) 30%, transparent)}.vds-badge[data-color=accent]{--badge-color-solid:var(--vds-color-accent-solid,var(--vds-color-accent-emphasis,#f97316));--badge-color-solid-hover:var(--vds-color-accent-solid-hover,#ea580c);--badge-color-on-solid:var(--vds-color-on-accent,#fff);--badge-color-bg:var(--vds-color-accent-bg,#ffedd5);--badge-color-bg-hover:var(--vds-color-accent-bg-hover,color-mix(in oklch, var(--badge-color-bg), var(--badge-color-solid) 15%));--badge-color-text:var(--vds-color-accent-text,#7c2d12);--badge-color-border:var(--badge-color-solid);--badge-color-border-soft:color-mix(in oklch, var(--badge-color-solid) 30%, transparent)}.vds-badge[data-color=neutral]{--badge-color-solid:var(--vds-color-bg-inverse,#171717);--badge-color-solid-hover:var(--vds-color-neutral-11,#262626);--badge-color-on-solid:var(--vds-color-text-inverse,#fafafa);--badge-color-bg:var(--vds-color-neutral-bg,var(--vds-color-bg-muted,#f5f5f5));--badge-color-bg-hover:var(--vds-color-neutral-4,var(--vds-color-neutral-bg,#e5e5e5));--badge-color-text:var(--vds-color-text,#171717);--badge-color-border:var(--vds-color-border-strong,#a3a3a3);--badge-color-border-soft:var(--vds-color-border-muted,color-mix(in oklch, var(--badge-color-solid) 20%, transparent))}.vds-badge[data-variant=solid]{--badge-bg:var(--badge-color-solid);--badge-bg-hover:var(--badge-color-solid-hover);--badge-text:var(--badge-color-on-solid);--badge-border:transparent;--badge-dot:var(--badge-color-on-solid)}.vds-badge[data-variant=outline]{--badge-bg:transparent;--badge-bg-hover:var(--badge-color-bg);--badge-text:var(--badge-color-text);--badge-border:var(--badge-color-border)}.vds-badge[data-variant=subtle]{--badge-bg:transparent;--badge-bg-hover:var(--badge-color-bg);--badge-text:var(--badge-color-text);--badge-border:transparent}.vds-badge[data-variant=soft-outline]{--badge-bg:var(--badge-color-bg);--badge-bg-hover:var(--badge-color-bg-hover);--badge-text:var(--badge-color-text);--badge-border:var(--badge-color-border-soft)}.vds-badge[data-size=xs]{--badge-height:1.25rem;--badge-padding-inline:var(--vds-space-1-5,.375rem);--badge-font-size:.625rem;--badge-gap:var(--vds-space-1,.25rem);--badge-icon-size:.625rem;--badge-dot-size:.3125rem}.vds-badge[data-size=sm]{--badge-height:1.25rem;--badge-padding-inline:var(--vds-space-1-5,.375rem);--badge-font-size:var(--vds-text-xs,.6875rem);--badge-gap:var(--vds-space-1,.25rem);--badge-icon-size:.6875rem;--badge-dot-size:.3125rem}.vds-badge[data-size=lg]{--badge-height:1.75rem;--badge-padding-inline:var(--vds-space-2-5,.625rem);--badge-font-size:var(--vds-text-sm,.875rem);--badge-gap:var(--vds-space-2,.5rem);--badge-icon-size:.875rem;--badge-dot-size:.4375rem}.vds-badge[data-shape=square]{--badge-radius:var(--vds-radius-nav-item,.375rem)}.vds-badge[data-dot-only=true]{--badge-height:var(--badge-dot-size);--badge-padding-inline:0;--badge-border-width:0}.vds-badge{justify-content:center;align-items:center;gap:var(--badge-gap);vertical-align:middle;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--badge-height);padding-block:0;padding-inline:var(--badge-padding-inline);background-color:var(--badge-bg);color:var(--badge-text);border:var(--badge-border-width) solid var(--badge-border);border-radius:var(--badge-radius);font-family:var(--badge-font-family);font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);line-height:var(--badge-line-height);letter-spacing:var(--badge-letter-spacing);white-space:normal;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--badge-transition-duration) var(--badge-transition-easing), border-color var(--badge-transition-duration) var(--badge-transition-easing), color var(--badge-transition-duration) var(--badge-transition-easing);text-decoration:none;display:inline-flex}.vds-badge[data-interactive=true],.vds-badge:is(a[href],button:enabled){cursor:pointer}.vds-badge[data-interactive=true]:not(:disabled):hover,.vds-badge:is(a[href],button:enabled):hover{background-color:var(--badge-bg-hover)}.vds-badge[data-interactive=true]:focus-visible,.vds-badge:is(a,button):focus-visible{outline:var(--badge-focus-ring-width) solid var(--badge-focus-ring-color);outline-offset:var(--badge-focus-ring-offset)}.vds-badge-label{overflow-wrap:anywhere;min-inline-size:0}.vds-badge-section{flex-shrink:0;align-items:center;display:inline-flex}.vds-badge>svg,.vds-badge-section>svg{inline-size:var(--badge-icon-size);block-size:var(--badge-icon-size);flex-shrink:0;display:block}.vds-badge-dot{inline-size:var(--badge-dot-size);block-size:var(--badge-dot-size);border-radius:var(--vds-radius-full,9999px);background-color:var(--badge-dot);flex-shrink:0}.vds-badge-close{inline-size:var(--badge-icon-size);block-size:var(--badge-icon-size);border-radius:var(--vds-radius-full,9999px);color:inherit;cursor:pointer;opacity:.7;transition:opacity var(--badge-transition-duration) var(--badge-transition-easing), background-color var(--badge-transition-duration) var(--badge-transition-easing);background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:calc(var(--badge-gap) / 2);padding:0;display:inline-flex}.vds-badge-close:hover,.vds-badge-close:focus-visible{opacity:1;background-color:color-mix(in oklch, currentColor 14%, transparent)}.vds-badge-close:focus-visible{outline:var(--badge-focus-ring-width) solid var(--badge-focus-ring-color);outline-offset:1px}.vds-badge-close>svg{block-size:100%;inline-size:100%}.vds-badge[data-dot-only=true]{inline-size:var(--badge-dot-size);block-size:var(--badge-dot-size);background-color:var(--badge-color-solid);border:0;flex-shrink:0}.vds-badge[data-dot-only=true]>.vds-badge-dot{display:none}.vds-badge:disabled{cursor:not-allowed;opacity:var(--vds-opacity-disabled,.5)}@media (prefers-reduced-motion:reduce){.vds-badge,.vds-badge-close{transition:none}}@media (forced-colors:active){.vds-badge{border-color:canvastext}.vds-badge:disabled{color:graytext;opacity:1;border-color:graytext}.vds-badge-dot,.vds-badge[data-dot-only=true]{forced-color-adjust:none;background-color:canvastext}}}