/**
 * ShalaMakes Custom Icon System
 * ==============================
 * SVG icons that match the dark futuristic neon aesthetic
 * Uses CSS custom properties for easy theming
 */

/* Icon Base Styles */
.sm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

.sm-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Icon Sizes */
.sm-icon-xs { font-size: 0.75rem; }
.sm-icon-sm { font-size: 1rem; }
.sm-icon-md { font-size: 1.25rem; }
.sm-icon-lg { font-size: 1.5rem; }
.sm-icon-xl { font-size: 2rem; }
.sm-icon-2xl { font-size: 2.5rem; }
.sm-icon-3xl { font-size: 3rem; }

/* Icon Colors */
.sm-icon-neon { color: var(--sm-neon, #00ff66); }
.sm-icon-cyan { color: var(--sm-cyan, #00d4ff); }
.sm-icon-purple { color: var(--sm-purple, #8b5cf6); }
.sm-icon-muted { color: var(--sm-text-muted, #8888a0); }
.sm-icon-dim { color: var(--sm-text-dim, #5a5a70); }
.sm-icon-warning { color: #fbbf24; }
.sm-icon-error { color: #f87171; }
.sm-icon-success { color: var(--sm-neon, #00ff66); }

/* Icon with Glow Effect */
.sm-icon-glow {
  filter: drop-shadow(0 0 6px currentColor);
}

.sm-icon-glow-strong {
  filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 20px currentColor);
}

/* Animated Icons */
.sm-icon-spin {
  animation: sm-icon-spin 1s linear infinite;
}

.sm-icon-pulse {
  animation: sm-icon-pulse 2s ease-in-out infinite;
}

.sm-icon-bounce {
  animation: sm-icon-bounce 1s ease infinite;
}

.sm-icon-float {
  animation: sm-icon-float 3s ease-in-out infinite;
}

@keyframes sm-icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes sm-icon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes sm-icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10%); }
}

@keyframes sm-icon-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

/* Feature Icon Container (for banners/cards) */
.sm-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.15), rgba(0, 212, 255, 0.1));
  border: 1px solid rgba(0, 255, 102, 0.3);
  color: var(--sm-neon, #00ff66);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.sm-feature-icon.cyan {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(139, 92, 246, 0.1));
  border-color: rgba(0, 212, 255, 0.3);
  color: var(--sm-cyan, #00d4ff);
}

.sm-feature-icon.purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(0, 255, 102, 0.1));
  border-color: rgba(139, 92, 246, 0.3);
  color: var(--sm-purple, #8b5cf6);
}

/* Status Badge with Icon */
.sm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.sm-status-badge .sm-icon {
  font-size: 0.875rem;
}

.sm-status-badge.success {
  background: rgba(0, 255, 102, 0.15);
  color: var(--sm-neon, #00ff66);
  border: 1px solid rgba(0, 255, 102, 0.3);
}

.sm-status-badge.warning {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.sm-status-badge.error {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.sm-status-badge.info {
  background: rgba(0, 212, 255, 0.15);
  color: var(--sm-cyan, #00d4ff);
  border: 1px solid rgba(0, 212, 255, 0.3);
}