/**
 * StatusIndicator Component Styles
 */

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: var(--space-2);
  transition: all var(--transition-normal) var(--ease-in-out);
  flex-shrink: 0;
}

/* Connected state - Green with glow */
.status-indicator.status-connected {
  background-color: var(--success);
  box-shadow: 0 0 4px var(--success);
}

/* Active state - Blue with pulse animation */
.status-indicator.status-active {
  background-color: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  animation: pulse 2s infinite;
}

/* Disconnected state - Gray with border */
.status-indicator.status-disconnected {
  background-color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Connecting state - Orange spinning animation */
.status-indicator.status-connecting {
  width: 10px;
  height: 10px;
  border: 2px solid var(--warning);
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

/* Error state - Red with help cursor */
.status-indicator.status-error {
  background-color: var(--error);
  cursor: help;
}

/* Hover effect for clickable indicators */
.status-indicator[tabindex]:hover {
  transform: scale(1.2);
}

.status-indicator[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Animations */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}