/**
 * @file
 * FlowDrop Status Badge Component Styles
 */

.fd-status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--fd-badge-padding-y) var(--fd-badge-padding-x);
  white-space: nowrap;
  letter-spacing: var(--fd-badge-letter-spacing);
  text-transform: var(--fd-badge-text-transform);
  border-radius: var(--fd-badge-radius);
  font-size: var(--fd-badge-font-size);
  font-weight: var(--fd-badge-font-weight);
  line-height: 1;
  gap: var(--fd-space-1);
}

/* Size variants */
.fd-status-badge--sm {
  padding: 0.125rem var(--fd-space-2);
  font-size: 0.625rem;
}

/* Dot indicator */
.fd-status-badge__dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--fd-radius-full);
}

/* ========================================================================
 * VARIANT STYLES
 * ======================================================================== */

/* Success */
.fd-status-badge--success {
  color: var(--fd-badge-success-text);
  background-color: var(--fd-badge-success-bg);
}

.fd-status-badge--success .fd-status-badge__dot {
  background-color: var(--fd-badge-success-border);
}

/* Warning */
.fd-status-badge--warning {
  color: var(--fd-badge-warning-text);
  background-color: var(--fd-badge-warning-bg);
}

.fd-status-badge--warning .fd-status-badge__dot {
  background-color: var(--fd-badge-warning-border);
}

/* Error */
.fd-status-badge--error {
  color: var(--fd-badge-error-text);
  background-color: var(--fd-badge-error-bg);
}

.fd-status-badge--error .fd-status-badge__dot {
  background-color: var(--fd-badge-error-border);
}

/* Info */
.fd-status-badge--info {
  color: var(--fd-badge-info-text);
  background-color: var(--fd-badge-info-bg);
}

.fd-status-badge--info .fd-status-badge__dot {
  background-color: var(--fd-badge-info-border);
}

/* Neutral */
.fd-status-badge--neutral {
  color: var(--fd-badge-neutral-text);
  background-color: var(--fd-badge-neutral-bg);
}

.fd-status-badge--neutral .fd-status-badge__dot {
  background-color: var(--fd-badge-neutral-border);
}

/* Animated dot for running states */
@keyframes fd-badge-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.fd-status-badge--running .fd-status-badge__dot {
  animation: fd-badge-pulse 1.5s ease-in-out infinite;
}
