@utility badge {
  @apply rounded-full px-2 py-0.5 text-xs font-medium;

  height: auto;
  gap: 0.25rem;
}

@utility badge-primary {
  border-color: transparent;
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

@utility badge-secondary {
  border-color: transparent;
  background-color: var(--color-secondary);
  color: var(--color-secondary-content);
}

@utility badge-warning {
  border-color: transparent;
  background-color: var(--color-warning);
  color: var(--color-warning-content);
}

@utility badge-success {
  border-color: transparent;
  background-color: var(--color-success);
  color: var(--color-success-content);
}

@utility badge-error {
  border-color: transparent;
  background-color: var(--color-error);
  color: var(--color-error-content);
}