.hs-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--hs-space-4);
  padding: var(--hs-space-4) var(--hs-space-12);
  border-radius: var(--hs-radius-full);
  font-size: var(--hs-font-size-caption);
  font-weight: var(--hs-font-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
  background: var(--hs-color-gray-100);
  color: var(--hs-color-gray-700);
}

.hs-badge--primary { background: var(--hs-color-primary-100); color: var(--hs-color-primary-700); }
.hs-badge--success { background: var(--hs-color-success-100); color: var(--hs-color-success-700); }
.hs-badge--warning { background: var(--hs-color-warning-100); color: var(--hs-color-warning-800); }
.hs-badge--danger  { background: var(--hs-color-danger-100);  color: var(--hs-color-danger-700); }
.hs-badge--info    { background: var(--hs-color-info-100);    color: var(--hs-color-info-700); }

.hs-badge--solid.hs-badge--primary { background: var(--hs-color-primary-fill); color: #fff; }
.hs-badge--solid.hs-badge--danger  { background: var(--hs-color-danger-500);  color: #fff; }

.hs-badge__dot {
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}