.badge-outline {
  padding: 0.25rem 0.75rem;
  font-size: 0.625rem;
  border-radius: 20px;
  font-weight: bold;
}

.badge-outline-primary {
  background-color: color-mix(in srgb, var(--bs-primary) 20%, transparent);
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
}

.badge-outline-danger {
  background-color: color-mix(in srgb, var(--bs-danger) 20%, transparent);
  color: var(--bs-danger);
  border: 1px solid var(--bs-danger);
}

.badge-outline-warning {
  background-color: color-mix(in srgb, var(--bs-warning) 20%, transparent);
  color: var(--bs-warning);
  border: 1px solid var(--bs-warning);
}