/* BluUI_Core → Badge — Style Sheet.
Canonical Block CSS. Paste the whole file into this Block only.
Theme variables remain inherited; selectors keep the existing widget classes. */

.blu-badge {
  box-sizing: border-box;
  min-width: 0;
  color: var(--bluui-text, #182230);
  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
/* Badge — display-only labels using the shared color Static Entity.
Use Chip when a label needs selection or removal behavior. */
.blu-badge {
  --blu-badge-background: var(--bluui-surface, #fff);
  --blu-badge-color: var(--bluui-text-muted, #64748b);
  --blu-badge-border: var(--bluui-border, #e2e8f0);
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--blu-badge-border);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--blu-badge-background);
  color: var(--blu-badge-color);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
.blu-badge .blu-badge__label {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Shared ComponentColor palette. Presets use Ant Design filled colors;
   statuses use solid colors. Primary/Secondary retain their existing roles. */
.blu-badge.blu-badge--default {
  --blu-badge-background: var(--bluui-color-default-solid);
  --blu-badge-color: var(--bluui-color-default-contrast);
  --blu-badge-border: var(--bluui-color-default-solid);
}
.blu-badge.blu-badge--primary {
  --blu-badge-background: var(--bluui-color-primary-solid);
  --blu-badge-color: var(--bluui-color-primary-contrast);
  --blu-badge-border: var(--bluui-color-primary-solid);
}
.blu-badge.blu-badge--secondary {
  --blu-badge-background: var(--bluui-color-secondary-soft);
  --blu-badge-color: var(--bluui-color-secondary-text);
  --blu-badge-border: var(--bluui-color-secondary-soft);
}
.blu-badge.blu-badge--success {
  --blu-badge-background: var(--bluui-color-success-solid);
  --blu-badge-color: var(--bluui-color-success-contrast);
  --blu-badge-border: var(--bluui-color-success-solid);
}
.blu-badge.blu-badge--processing {
  --blu-badge-background: var(--bluui-color-processing-solid);
  --blu-badge-color: var(--bluui-color-processing-contrast);
  --blu-badge-border: var(--bluui-color-processing-solid);
}
.blu-badge.blu-badge--warning {
  --blu-badge-background: var(--bluui-color-warning-solid);
  --blu-badge-color: var(--bluui-color-warning-contrast);
  --blu-badge-border: var(--bluui-color-warning-solid);
}
.blu-badge.blu-badge--error {
  --blu-badge-background: var(--bluui-color-error-solid);
  --blu-badge-color: var(--bluui-color-error-contrast);
  --blu-badge-border: var(--bluui-color-error-solid);
}
.blu-badge.blu-badge--danger {
  --blu-badge-background: var(--bluui-color-danger-solid);
  --blu-badge-color: var(--bluui-color-danger-contrast);
  --blu-badge-border: var(--bluui-color-danger-solid);
}
.blu-badge.blu-badge--magenta {
  --blu-badge-background: var(--bluui-color-magenta-soft);
  --blu-badge-color: var(--bluui-color-magenta-text);
  --blu-badge-border: var(--bluui-color-magenta-soft);
}
.blu-badge.blu-badge--red {
  --blu-badge-background: var(--bluui-color-red-soft);
  --blu-badge-color: var(--bluui-color-red-text);
  --blu-badge-border: var(--bluui-color-red-soft);
}
.blu-badge.blu-badge--volcano {
  --blu-badge-background: var(--bluui-color-volcano-soft);
  --blu-badge-color: var(--bluui-color-volcano-text);
  --blu-badge-border: var(--bluui-color-volcano-soft);
}
.blu-badge.blu-badge--orange {
  --blu-badge-background: var(--bluui-color-orange-soft);
  --blu-badge-color: var(--bluui-color-orange-text);
  --blu-badge-border: var(--bluui-color-orange-soft);
}
.blu-badge.blu-badge--gold {
  --blu-badge-background: var(--bluui-color-gold-soft);
  --blu-badge-color: var(--bluui-color-gold-text);
  --blu-badge-border: var(--bluui-color-gold-soft);
}
.blu-badge.blu-badge--lime {
  --blu-badge-background: var(--bluui-color-lime-soft);
  --blu-badge-color: var(--bluui-color-lime-text);
  --blu-badge-border: var(--bluui-color-lime-soft);
}
.blu-badge.blu-badge--green {
  --blu-badge-background: var(--bluui-color-green-soft);
  --blu-badge-color: var(--bluui-color-green-text);
  --blu-badge-border: var(--bluui-color-green-soft);
}
.blu-badge.blu-badge--cyan {
  --blu-badge-background: var(--bluui-color-cyan-soft);
  --blu-badge-color: var(--bluui-color-cyan-text);
  --blu-badge-border: var(--bluui-color-cyan-soft);
}
.blu-badge.blu-badge--blue {
  --blu-badge-background: var(--bluui-color-blue-soft);
  --blu-badge-color: var(--bluui-color-blue-text);
  --blu-badge-border: var(--bluui-color-blue-soft);
}
.blu-badge.blu-badge--geekblue {
  --blu-badge-background: var(--bluui-color-geekblue-soft);
  --blu-badge-color: var(--bluui-color-geekblue-text);
  --blu-badge-border: var(--bluui-color-geekblue-soft);
}
.blu-badge.blu-badge--purple {
  --blu-badge-background: var(--bluui-color-purple-soft);
  --blu-badge-color: var(--bluui-color-purple-text);
  --blu-badge-border: var(--bluui-color-purple-soft);
}