:root {
  --badge-width: var(--size-104);
  --badge-height: var(--size-26);
  --badge-padding: var(--space-0-5) var(--space-2);
  --badge-radius: var(--radius-6);
  /* Passive state text fitted to the 26px badge, not an action-label role. */
  --badge-font: var(--font-sans-11-16-medium);
  /* Activity is passive, not an action. */
  --badge-primary-background: var(--color-activity);
  --badge-primary-foreground: var(--color-activity-foreground);
  --badge-secondary-background: var(--color-muted);
  --badge-secondary-foreground: var(--color-foreground);
  --badge-success-background: var(--color-success);
  --badge-success-foreground: var(--color-success-foreground);
  --badge-destructive-background: var(--color-error);
  --badge-destructive-foreground: var(--color-error-foreground);
  --badge-ghost-background: var(--color-clear);
  --badge-ghost-foreground: var(--color-muted-foreground);
}

.badge {
  --badge-background: var(--badge-secondary-background);
  --badge-foreground: var(--badge-secondary-foreground);
}
.badge--primary {
  --badge-background: var(--badge-primary-background);
  --badge-foreground: var(--badge-primary-foreground);
}
.badge--success {
  --badge-background: var(--badge-success-background);
  --badge-foreground: var(--badge-success-foreground);
}
.badge--destructive {
  --badge-background: var(--badge-destructive-background);
  --badge-foreground: var(--badge-destructive-foreground);
}
.badge--ghost {
  --badge-background: var(--badge-ghost-background);
  --badge-foreground: var(--badge-ghost-foreground);
}

.badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--badge-width);
  min-block-size: var(--badge-height);
  max-inline-size: 100%;
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  background: var(--badge-background);
  color: var(--badge-foreground);
  font: var(--badge-font);
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
}