/* Base Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  width: fit-content;
  border: 1px solid;
}

/* Variant: Info (Default) */
.badge--info {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.35);
  color: var(--color-info);
}

/* Variant: Success */
.badge--success {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--color-success);
}

/* Variant: Warning */
.badge--warning {
  background: rgba(255, 107, 53, 0.16);
  border-color: rgba(255, 107, 53, 0.35);
  color: var(--color-warning);
}

/* Variant: Error */
.badge--error {
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.35);
  color: var(--color-error);
}

/* Variant: Neutral */
.badge--neutral {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--color-text-secondary);
}

/* Filled Variant (Solid background) */
.badge--filled {
  border: none;
}

.badge--filled.badge--info {
  background: var(--color-info);
  color: #0f172a;
}

.badge--filled.badge--success {
  background: var(--color-success);
  color: #0f172a;
}

.badge--filled.badge--warning {
  background: var(--color-warning);
  color: #ffffff;
}

.badge--filled.badge--error {
  background: var(--color-error);
  color: #ffffff;
}

/* Small Badge */
.badge--sm {
  padding: 2px 8px;
  font-size: 11px;
}

/* Large Badge */
.badge--lg {
  padding: 6px 14px;
  font-size: 13px;
}

/* With Icon */
.badge__icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}