:host{--_fg: var(--osg-badge-fg, light-dark(var(--gray-cool-60), var(--gray-cool-10)));--_bg: var(--osg-badge-bg, light-dark(var(--gray-cool-10), var(--gray-cool-60)));--_fg-hover: var(--osg-badge-fg-hover, light-dark(var(--gray-cool-70), var(--gray-cool-20)));--_bg-hover: var(--osg-badge-bg-hover, light-dark(var(--gray-cool-20), var(--gray-cool-70)));margin-inline:0.25em;container-type:inline-size;color-scheme:inherit}:host(:first-child){margin-inline-start:0}:host(:last-child){margin-inline-end:0}:host(:empty){display:none}:host(:not([interactive])){pointer-events:none}:host([interactive]){cursor:pointer}.badge{display:inline-block;vertical-align:baseline;padding:0.5em;font-weight:600;font-size:0.875em;font-family:var(--osg-badge-font-family, var(--font-family-sans-serif));line-height:1;letter-spacing:var(--badge-letter-spacing, 0.025em);text-decoration:none;text-transform:uppercase;white-space:var(--osg-badge-white-space, normal);color:var(--_fg);border-radius:var(--badge-border-radius, 0.25em);background:var(--_bg);font-variant-numeric:tabular-nums;text-box:trim-both cap alphabetic}:host([interactive]:hover) .badge,:host([interactive]:focus-within) .badge{color:var(--_fg-hover);background:var(--_bg-hover)}:host([demo-state="hover"]) .badge{color:var(--_fg-hover);background:var(--_bg-hover)}::slotted(a),::slotted(button){font:inherit;text-decoration:none;color:inherit;border:0;background:none;cursor:inherit}:host([variant="primary"]){--_fg: var(--osg-badge-primary-fg, light-dark(var(--blue-60), var(--blue-10)));--_bg: var(--osg-badge-primary-bg, light-dark(var(--blue-10), var(--blue-60)));--_fg-hover: var(--osg-badge-primary-fg-hover, light-dark(var(--blue-70), var(--blue-20)));--_bg-hover: var(--osg-badge-primary-bg-hover, light-dark(var(--blue-20), var(--blue-70)))}:host([variant="success"]){--_fg: var(--osg-badge-success-fg, light-dark(var(--green-cool-60), var(--green-cool-10)));--_bg: var(--osg-badge-success-bg, light-dark(var(--green-cool-10), var(--green-cool-60)));--_fg-hover: var(--osg-badge-success-fg-hover, light-dark(var(--green-cool-70), var(--green-cool-20)));--_bg-hover: var(--osg-badge-success-bg-hover, light-dark(var(--green-cool-20), var(--green-cool-70)))}:host([variant="warning"]){--_fg: var(--osg-badge-warning-fg, light-dark(var(--yellow-60), var(--yellow-10)));--_bg: var(--osg-badge-warning-bg, light-dark(var(--yellow-10), var(--yellow-60)));--_fg-hover: var(--osg-badge-warning-fg-hover, light-dark(var(--yellow-70), var(--yellow-20)));--_bg-hover: var(--osg-badge-warning-bg-hover, light-dark(var(--yellow-20), var(--yellow-80)))}:host([variant="danger"]){--_fg: var(--osg-badge-danger-fg, light-dark(var(--red-cool-60), var(--red-cool-10)));--_bg: var(--osg-badge-danger-bg, light-dark(var(--red-cool-10), var(--red-cool-60)));--_fg-hover: var(--osg-badge-danger-fg-hover, light-dark(var(--red-cool-70), var(--red-cool-20)));--_bg-hover: var(--osg-badge-danger-bg-hover, light-dark(var(--red-cool-20), var(--red-cool-80)))}:host([variant="secondary"]){--_fg: var(--osg-badge-secondary-fg, light-dark(var(--violet-60), var(--violet-20)));--_bg: var(--osg-badge-secondary-bg, light-dark(var(--violet-10), var(--violet-70)));--_fg-hover: var(--osg-badge-secondary-fg-hover, light-dark(var(--violet-70), var(--violet-20)));--_bg-hover: var(--osg-badge-secondary-bg-hover, light-dark(var(--violet-20), var(--violet-80)))}:host([variant="tertiary"]){--_fg: var(--osg-badge-tertiary-fg, light-dark(var(--orange-60), var(--orange-20)));--_bg: var(--osg-badge-tertiary-bg, light-dark(var(--orange-10), var(--orange-70)));--_fg-hover: var(--osg-badge-tertiary-fg-hover, light-dark(var(--orange-70), var(--orange-30)));--_bg-hover: var(--osg-badge-tertiary-bg-hover, light-dark(var(--orange-20), var(--orange-80)))}:host([kind="loud"]){--_fg: var(--osg-badge-loud-fg, light-dark(var(--gray-cool-5), var(--gray-cool-90)));--_bg: var(--osg-badge-loud-bg, light-dark(var(--gray-cool-70), var(--gray-cool-10)));--_fg-hover: var(--osg-badge-loud-fg-hover, light-dark(var(--gray-cool-5), var(--gray-cool-90)));--_bg-hover: var(--osg-badge-loud-bg-hover, light-dark(var(--gray-cool-60), var(--gray-cool-20)))}:host([kind="loud"][variant="primary"]){--_fg: var(--osg-badge-loud-primary-fg, var(--white));--_bg: var(--osg-badge-loud-primary-bg, var(--blue-50));--_fg-hover: var(--osg-badge-loud-primary-fg-hover, var(--white));--_bg-hover: var(--osg-badge-loud-primary-bg-hover, var(--blue-60))}:host([kind="loud"][variant="success"]){--_fg: var(--osg-badge-loud-success-fg, var(--green-cool-5));--_bg: var(--osg-badge-loud-success-bg, var(--green-cool-60));--_fg-hover: var(--osg-badge-loud-success-fg-hover, var(--green-cool-5));--_bg-hover: var(--osg-badge-loud-success-bg-hover, var(--green-cool-70))}:host([kind="loud"][variant="warning"]){--_fg: var(--osg-badge-loud-warning-fg, var(--yellow-80));--_bg: var(--osg-badge-loud-warning-bg, var(--yellow-20));--_fg-hover: var(--osg-badge-loud-warning-fg-hover, var(--yellow-80));--_bg-hover: var(--osg-badge-loud-warning-bg-hover, var(--yellow-10))}:host([kind="loud"][variant="danger"]){--_fg: var(--osg-badge-loud-danger-fg, var(--red-cool-5));--_bg: var(--osg-badge-loud-danger-bg, var(--red-cool-60));--_fg-hover: var(--osg-badge-loud-danger-fg-hover, var(--red-cool-5));--_bg-hover: var(--osg-badge-loud-danger-bg-hover, var(--red-cool-70))}:host([kind="loud"][variant="secondary"]){--_fg: var(--osg-badge-loud-secondary-fg, var(--violet-5));--_bg: var(--osg-badge-loud-secondary-bg, var(--violet-60));--_fg-hover: var(--osg-badge-loud-secondary-fg-hover, var(--violet-10));--_bg-hover: var(--osg-badge-loud-secondary-bg-hover, var(--violet-70))}:host([kind="loud"][variant="tertiary"]){--_fg: var(--osg-badge-loud-tertiary-fg, var(--orange-80));--_bg: var(--osg-badge-loud-tertiary-bg, var(--orange-30));--_fg-hover: var(--osg-badge-loud-tertiary-fg-hover, var(--orange-80));--_bg-hover: var(--osg-badge-loud-tertiary-bg-hover, var(--orange-20))}