.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"] {
    --background-color: var(--yellow-1);
    --color: var(--yellow-10);
  }

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

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