/* VaultBadge — same colors/sizes as button: primary, secondary, primary-light, light, success, danger, warning; sm, md, lg */

.vault-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  border-radius: 9999px;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Sizes — aligned with button scale */
.vault-badge--xs {
  font-size: 0.625rem;
  padding: 0.0625rem 0.25rem;
  line-height: 1.2;
}
.vault-badge--sm {
  font-size: 0.6875rem;
  padding: 0.125rem 0.375rem;
  line-height: 1.25;
}
.vault-badge--md {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  line-height: 1.25;
}
.vault-badge--lg {
  font-size: 0.8125rem;
  padding: 0.25rem 0.625rem;
  line-height: 1.3;
}

/* Colors — same vars as vault-button */
.vault-badge--primary {
  background: var(--vault-primary);
  color: #fff;
  border-color: var(--vault-primary);
}
.vault-badge--secondary {
  background: var(--vault-secondary);
  color: #fff;
  border-color: var(--vault-secondary);
}
.vault-badge--primary-light {
  background: var(--vault-primary-light);
  color: var(--vault-primary);
  border-color: rgba(4, 146, 181, 0.35);
}
.vault-badge--light {
  background: var(--vault-border);
  color: var(--vault-text);
  border-color: var(--vault-border);
}
.vault-badge--success {
  background: var(--vault-success);
  color: #fff;
  border-color: var(--vault-success);
}
.vault-badge--danger {
  background: var(--vault-danger);
  color: #fff;
  border-color: var(--vault-danger);
}
.vault-badge--warning {
  background: var(--vault-warning-light);
  color: var(--vault-warning);
  border-color: rgba(217, 119, 6, 0.4);
}

/* Custom color (hex): background/color set inline in JS */
.vault-badge--custom {
  border-width: 1px;
  border-style: solid;
}