.badge {
  --color: var(--text-1);
  --background-color: var(--surface-2);

  border-radius: var(--radius-2);
  color: var(--color);
  padding-inline: var(--size-1);
  background-color: var(--background-color);
  text-wrap: nowrap;
  max-inline-size: none;

  &[data-status="pending"] {
    --color: var(--text-1);
    --background-color: var(--surface-2);
  }

  &[data-status="progress"],
  &[data-status="processing"] {
    --background-color: var(--yellow-1);
    --color: var(--yellow-10);
  }

  &[data-status="done"],
  &[data-status="published"],
  &[data-status="completed"] {
    --background-color: var(--green-1);
    --color: var(--green-9);
  }

  &[data-status="expired"],
  &[data-status="canceled"],
  &[data-status="failed"] {
    --background-color: var(--red-1);
    --color: var(--red-9);
  }
}