/* ============================================
   Badge Component - Inspirado no shadcn/ui
   ============================================ */

/* Base Badge Styles */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
  line-height: 1;
  padding: var(--spacing-1) var(--spacing-3);
  transition: all var(--transition-fast);
  vertical-align: middle;
  box-sizing: border-box;
  text-align: center;
}

/* ============================================
   Badge Variants - Default
   ============================================ */
.badge--default {
  background-color: var(--primary-500);
  color: white;
}

/* ============================================
   Badge Variants - Secondary
   ============================================ */
.badge--secondary {
  background-color: var(--neutral-100);
  color: var(--foreground);
}

/* ============================================
   Badge Variants - Destructive
   ============================================ */
.badge--destructive {
  background-color: var(--error-500);
  color: white;
}

/* ============================================
   Badge Variants - Outline
   ============================================ */
.badge--outline {
  background-color: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
}

/* ============================================
   Badge Variants - Semantic Colors
   ============================================ */
.badge--success {
  background-color: var(--success-100);
  color: var(--success-700);
}

.badge--warning {
  background-color: var(--warning-100);
  color: var(--warning-700);
}

.badge--info {
  background-color: var(--info-100);
  color: var(--info-700);
}

.badge--primary {
  background-color: var(--primary-100);
  color: var(--primary-700);
}

.badge--error {
  background-color: var(--error-100);
  color: var(--error-700);
}

/* ============================================
   Badge Sizes
   ============================================ */
.badge--sm {
  font-size: 0.625rem; /* 10px */
  padding: 0.125rem var(--spacing-2);
  min-height: 1.25rem; /* 20px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge--default-size {
  font-size: var(--font-size-xs);
  padding: var(--spacing-1) var(--spacing-3);
  min-height: 1.5rem; /* 24px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge--lg {
  font-size: var(--font-size-sm);
  padding: var(--spacing-2) var(--spacing-4);
  min-height: 1.75rem; /* 28px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   Badge as Counter (Rounded Full)
   ============================================ */
.badge--counter {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--spacing-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
}

.badge--counter.badge--sm {
  min-width: 1rem;
  height: 1rem;
  padding: 0 var(--spacing-1);
  font-size: 0.625rem;
  line-height: 1;
}

.badge--counter.badge--lg {
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--spacing-2);
  font-size: var(--font-size-xs);
  line-height: 1;
}

/* ============================================
   Badge with Icon
   ============================================ */
.badge__icon {
  display: inline-flex;
  align-items: center;
  margin-right: var(--spacing-1);
  width: 0.875rem;
  height: 0.875rem;
}

.badge__icon:only-child {
  margin-right: 0;
}

.badge--sm .badge__icon {
  width: 0.75rem;
  height: 0.75rem;
}

.badge--lg .badge__icon {
  width: 1rem;
  height: 1rem;
}

/* ============================================
   Badge Dot (Indicator)
   ============================================ */
.badge--dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: var(--radius-full);
  min-width: 0.5rem;
}

.badge--dot.badge--sm {
  width: 0.375rem;
  height: 0.375rem;
  min-width: 0.375rem;
}

.badge--dot.badge--lg {
  width: 0.625rem;
  height: 0.625rem;
  min-width: 0.625rem;
}

/* ============================================
   Badge with Text and Icon
   ============================================ */
.badge--with-icon {
  gap: var(--spacing-1);
}

/* ============================================
   Badge Custom Colors (via inline styles)
   ============================================ */
.badge--custom {
  /* Use inline styles for custom colors */
}

/* ============================================
   Badge in Different Contexts
   ============================================ */
/* Badge inside button */
.btn .badge {
  margin-left: 0;
  margin-right: 0;
}

/* Badge dot before text in button */
.btn .badge--dot:first-child {
  margin-right: var(--spacing-2);
}

/* Badge inside card header */
.card__header .badge {
  margin-left: var(--spacing-2);
}

/* ============================================
   Responsive Badge
   ============================================ */
@media (max-width: 768px) {
  .badge {
    font-size: 0.625rem;
    padding: 0.125rem var(--spacing-2);
  }

  .badge--lg {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) var(--spacing-3);
  }
}