.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-round);
  border: var(--border-size-1) solid;
  padding: var(--space-2) var(--space-4);
  transition: colors 200ms var(--ease);
}

.badge:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-neutral-6);
}

/* Variants */
.default {
  border-color: transparent;
  background: var(--color-neutral-3);
  color: var(--color-neutral-11);
}

.default:hover {
  background: color-mix(in srgb, var(--color-accent-9) 80%, transparent);
  color: var(--color-accent-contrast);
}

.secondary {
  border-color: transparent;
  background: var(--color-accent-3);
  color: var(--color-accent-11);
}

.secondary:hover {
  background: color-mix(in srgb, var(--color-accent-3) 80%, transparent);
  color: var(--color-accent-12);
}

.destructive {
  border-color: transparent;
  background: var(--color-error-9);
  color: var(--color-error-contrast);
}

.destructive:hover {
  background: color-mix(in srgb, var(--color-error-9) 80%, transparent);
}

.outline {
  border-color: var(--color-accent-7);
}