/* Base Badge Style */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--spacing-sm);
  border-radius: var(--radius-full);
  font-family: var(--font-family-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
}

.badge__icon {
  font-size: 14px !important;
}

.badge__text {
  font-family: var(--font-family-body);
}

/* Badge Color Modifiers */
.badge--warning {
  background-color: rgba(255, 159, 10, 0.1);
  color: #ff9f0a;
  border: 1px solid rgba(255, 159, 10, 0.2);
}

.badge--info {
  background-color: rgba(10, 132, 255, 0.1);
  color: #0a84ff;
  border: 1px solid rgba(10, 132, 255, 0.2);
}

.badge--purple {
  background-color: rgba(191, 90, 242, 0.1);
  color: #bf5af2;
  border: 1px solid rgba(191, 90, 242, 0.2);
}

.badge--teal {
  background-color: rgba(48, 209, 88, 0.1);
  color: #30d158;
  border: 1px solid rgba(48, 209, 88, 0.2);
}

.badge--primary {
  background-color: rgba(255, 107, 53, 0.1);
  color: var(--color-primary);
  border: 1px solid rgba(255, 107, 53, 0.2);
}

.badge--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid rgba(52, 199, 89, 0.2);
}

.badge--success-filled {
  background-color: var(--color-success);
  color: var(--color-on-primary);
  border: 1px solid var(--color-success);
}

.badge--danger {
  background-color: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid rgba(255, 59, 48, 0.2);
}

/* Pulse Dot Styles for Active States */
.badge__pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  margin-right: 2px;
}

.badge--pulse .badge__pulse-dot {
  background-color: var(--color-primary);
  animation: pulse-primary 1.5s infinite;
}

.badge--pulse-success .badge__pulse-dot {
  background-color: var(--color-success);
  animation: pulse-success 1.5s infinite;
}

/* Animations */
@keyframes pulse-primary {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
  }
}

@keyframes pulse-success {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(52, 199, 89, 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
  }
}