.badge {
  display: inline-block;
  padding: 0.4em 0.6666666667em;
  border: 1px solid var(--color-grey-border);
  background: var(--color-bg);
  border-radius: 999px;
  font-size: 0.8666666667em;
  line-height: 1.2;
}

.badge + .badge {
  margin-left: 0.5333333333em;
}

.badge--count {
  box-sizing: content-box;
  min-width: 1.2em;
  padding: 0.4em;
  text-align: center;
}

.badge--warn {
  background: color-mix(in srgb, var(--color-secondary) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-secondary) 40%, transparent);
  color: var(--color-secondary);
}

.badge--muted {
  color: var(--color-grey-text);
  background: var(--color-bg-footer);
}

.badge--draft {
  --badge-color: var(--color-status-draft);
  color: var(--color-grey-text);
}
.badge--pending {
  --badge-color: var(--color-status-pending);
}
.badge--confirmed {
  --badge-color: var(--color-status-confirmed);
}
.badge--completed {
  --badge-color: var(--color-status-completed);
}
.badge--declined {
  --badge-color: var(--color-status-declined);
}
.badge--cancelled {
  --badge-color: var(--color-status-cancelled);
}
.badge--sent {
  --badge-color: var(--color-status-sent);
}
.badge--signed {
  --badge-color: var(--color-status-signed);
}
.badge--superseded {
  --badge-color: var(--color-status-superseded);
}
.badge--blocked {
  --badge-color: var(--color-status-blocked);
}

.badge--pending,
.badge--confirmed,
.badge--completed,
.badge--declined,
.badge--cancelled,
.badge--sent,
.badge--signed,
.badge--superseded,
.badge--blocked {
  color: var(--badge-color);
}

.badge--draft,
.badge--pending,
.badge--confirmed,
.badge--completed,
.badge--declined,
.badge--cancelled,
.badge--sent,
.badge--signed,
.badge--superseded,
.badge--blocked {
  font-weight: 600;
  white-space: nowrap;
  border-color: color-mix(in srgb, var(--badge-color) 45%, transparent);
  background: color-mix(in srgb, var(--badge-color) 12%, transparent);
}

.badge--blocked {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-status-blocked-stripe) 20%, transparent) 0 6px,
    color-mix(in srgb, var(--color-status-blocked) 10%, transparent) 6px 12px
  );
}