.ui-badge{--gap-v:1px;--gap-h:3px;display:inline-flex;align-items:center;height:var(--size);min-width:0;max-width:100%;padding:var(--gap-v) var(--gap-h);font-weight:var(--medium);line-height:1;letter-spacing:.1em;color:var(--color-text);background-color:var(--color-background);border:1px solid transparent;border-radius:var(--ui-radius);transition-property:color,background-color,border-color,opacity,transform;transition-duration:.2s;transition-timing-function:ease-out}.ui-badge.rounded{border-radius:var(--ui-radius-full)}.ui-badge.block{display:flex;justify-content:center;width:100%}.ui-badge.invert{flex-direction:row-reverse}.ui-badge.square{padding-inline:var(--gap-v)}@supports not (padding-inline:0){.ui-badge.square{padding-left:var(--gap-v);padding-right:var(--gap-v)}}.ui-badge.xs{--size:13px;-moz-column-gap:4px;column-gap:4px;font-size:var(--ui-text-extrasmall)}.ui-badge.xs.padded{--size:15px;--gap-v:2px;--gap-h:6px}.ui-badge.xs .ui-icon{width:7px;height:7px}.ui-badge.sm{--size:15px;-moz-column-gap:5px;column-gap:5px;font-size:var(--ui-text-small)}.ui-badge.sm.padded{--size:19px;--gap-v:3px;--gap-h:8px}.ui-badge.sm .ui-icon{width:9px;height:9px}.ui-badge.md{--size:18px;-moz-column-gap:6px;column-gap:6px;font-size:var(--ui-text)}.ui-badge.md.padded{--size:26px;--gap-v:5px;--gap-h:11px}.ui-badge.md .ui-icon{width:12px;height:12px}.ui-badge.lg{--size:24px;-moz-column-gap:8px;column-gap:8px;font-size:var(--ui-text-large)}.ui-badge.lg.padded{--size:36px;--gap-v:7px;--gap-h:14px}.ui-badge.lg .ui-icon{width:17px;height:17px}.ui-badge.xl{--size:34px;-moz-column-gap:10px;column-gap:10px;font-size:var(--ui-text-extralarge)}.ui-badge.xl.padded{--size:52px;--gap-v:10px;--gap-h:16px}.ui-badge.xl .ui-icon{width:23px;height:23px}.ui-badge.primary{--color-text:var(--ui-neutral-background);--color-background:var(--ui-neutral-solid)}.ui-badge.outline,.ui-badge.secondary{--color-text:var(--ui-neutral-text);--color-background:var(--ui-neutral-background)}.ui-badge.outline{border-color:var(--ui-neutral-text)}.ui-badge.accent{--color-text:var(--ui-neutral-background);--color-background:var(--ui-accent-solid)}.ui-badge .ui-icon{flex-shrink:0}.footprint{position:absolute;top:0;left:0;width:100%;height:100%}