.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--color-neutral-subtle);
  color: var(--color-neutral-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.badge--urgent {
  background-color: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

.badge--high {
  background-color: var(--color-warning-subtle);
  color: var(--color-warning-text);
}

.badge--normal {
  background-color: var(--color-info-subtle);
  color: var(--color-info-text);
}

.badge--low {
  background-color: var(--color-neutral-subtle);
  color: var(--color-text-muted);
}

.badge--success {
  background-color: var(--color-success-subtle);
  color: var(--color-success-text);
}

.badge--brand {
  background-color: var(--color-primary-subtle);
  color: var(--color-primary-text);
}

/* Outlined variant for labels, which are user-defined and shouldn't shout. */
.badge--outline {
  border: var(--border-width) solid var(--color-border-strong);
  background-color: transparent;
  color: var(--color-text-muted);
}

/* A left color bar reading priority, on ticket rows and cards. */
.priority_bar {
  width: 3px;
  border-radius: var(--radius-full);
  background-color: var(--color-priority-normal);
}

.priority_bar--urgent {
  background-color: var(--color-priority-urgent);
}

.priority_bar--high {
  background-color: var(--color-priority-high);
}

.priority_bar--low {
  background-color: var(--color-priority-low);
}