/* Design System - Badges */

/* Base badge styles */
.ds-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.125rem;
  transition: all 0.2s;
}

.ds-badge:focus {
  outline: 2px solid #384E8F;
  outline-offset: 2px;
}

/* Badge variants */
.ds-badge-default {
  border-color: transparent;
  background-color: #384E8F;
  color: #ffffff;
}

.ds-badge-default:hover {
  background-color: #2d3e73;
}

.ds-badge-secondary {
  border-color: transparent;
  background-color: #F3F4F6;
  color: #1F2937;
}

.ds-badge-secondary:hover {
  background-color: #E5E7EB;
}

.ds-badge-destructive {
  border-color: transparent;
  background-color: #EF4444;
  color: #ffffff;
}

.ds-badge-destructive:hover {
  background-color: #DC2626;
}

.ds-badge-outline {
  color: #111827;
  border-color: #E5E7EB;
  background-color: transparent;
}

/* Status badges - specific variants from the dashboard */
.ds-badge-success {
  background-color: #DCFCE7;
  color: #166534;
  border-color: transparent;
}

.ds-badge-warning {
  background-color: #FEF3C7;
  color: #92400E;
  border-color: transparent;
}

.ds-badge-info {
  background-color: #DBEAFE;
  color: #1E40AF;
  border-color: transparent;
}

.ds-badge-error {
  background-color: #FEE2E2;
  color: #991B1B;
  border-color: transparent;
}

/* Badge with icon */
.ds-badge svg {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.25rem;
}

/* Badge color variants for dashboard */
.ds-badge-blue {
  background-color: #EFF6FF;
  color: #2563EB;
  border-color: transparent;
}

.ds-badge-green {
  background-color: #DCFCE7;
  color: #22C55E;
  border-color: transparent;
}

.ds-badge-orange {
  background-color: #FFEDD5;
  color: #F97316;
  border-color: transparent;
}

/* Badge separator */
.ds-badge-separator {
  width: 0.375rem;
  height: 1px;
  border-radius: 9999px;
  background-color: currentColor;
}