@layer components{@scope(.ui-badge) to (:scope :is([class^=ui-],[class*=\ ui-],[class^=viz-],[class*=\ viz-]):not([data-ui-boundary=transparent])){@property --ui-badge-marker{syntax:"*";inherits:true;initial-value:currentColor}:scope{--ui-badge-marker:var(--ink-dim);align-items:baseline;gap:var(--space-1);min-block-size:var(--space-5);padding-block:var(--space-1);padding-inline:var(--space-2);border-radius:var(--radius-3);color:var(--ink);font-size:var(--text-sm);line-height:var(--space-4);border-style:solid;border-width:thin;min-inline-size:0;display:inline-flex}:scope[data-size=sm]{min-block-size:0;padding-block:0;padding-inline:calc(var(--space-1) * 1.5);font-size:var(--text-xs)}:scope [data-part=marker]{color:var(--ui-badge-marker);align-self:center;display:inline-flex}:scope[data-tone=neutral]{border-color:var(--surface-sunken);background-color:var(--surface-sunken)}:scope[data-tone=signal]{border-color:var(--signal-line);background-color:var(--signal-tint);color:var(--signal)}:scope[data-tone=ok]{--ui-badge-marker:var(--ok);border-color:var(--ok);background-color:color-mix(in oklab, var(--ok) 12%, transparent)}:scope[data-tone=warn]{--ui-badge-marker:var(--warn);border-color:var(--warn);background-color:color-mix(in oklab, var(--warn) 12%, transparent)}:scope[data-tone=danger]{--ui-badge-marker:var(--danger);border-color:var(--danger);background-color:color-mix(in oklab, var(--danger) 12%, transparent)}}}