// Badge component - Status indicators

/**
 * @section Badge Base
 */

/** @public Badge base - apply this first, then add variant */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  transition: all var(--transition-base);
  border: 1px solid transparent;
}

/**
 * @section Badge Variants
 */

/** @public Primary badge */
.badge-default {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/** @public Secondary badge */
.badge-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

/** @public Destructive/error badge */
.badge-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

/** @public Success badge */
.badge-success {
  background-color: hsl(var(--success));
  color: hsl(var(--success-foreground));
}

/** @public Warning badge */
.badge-warning {
  background-color: hsl(var(--warning));
  color: hsl(var(--warning-foreground));
}

/** @public Info badge */
.badge-info {
  background-color: hsl(var(--info));
  color: hsl(var(--info-foreground));
}

/** @public Outline badge */
.badge-outline {
  background-color: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}

/** @public Ghost badge - muted appearance */
.badge-ghost {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/**
 * @section Badge Sizes
 */

/** @public Small badge */
.badge-sm {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: 0.625rem;
}

/** @public Large badge */
.badge-lg {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
}