/**
 * 365 Entertainment — Widget Icon System
 * SVG icons with currentColor — Eagle controls color via CSS
 * 
 * Usage:
 *   <svg class="w-icon"><use href="/widgets/icons.svg#photo"/></svg>
 *   <svg class="w-icon w-icon-lg"><use href="/widgets/icons.svg#cart"/></svg>
 */

/* ── Base Icon ────────────────────────────────────────────────── */
.w-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.15s ease;
}

/* ── Size Variants ─────────────────────────────────────────────── */
.w-icon-xs  { width: 12px; height: 12px; }
.w-icon-sm  { width: 16px; height: 16px; }
/* .w-icon = 24px (default) */
.w-icon-md  { width: 32px; height: 32px; }
.w-icon-lg  { width: 48px; height: 48px; }
.w-icon-xl  { width: 64px; height: 64px; }

/* ── States ────────────────────────────────────────────────────── */
.w-icon.muted    { opacity: 0.4; }
.w-icon.disabled { opacity: 0.25; pointer-events: none; }

/* ── Hover / Interactive ──────────────────────────────────────── */
button .w-icon,
a .w-icon,
.w-icon-btn {
  cursor: pointer;
}

button:hover .w-icon,
a:hover .w-icon,
.w-icon-btn:hover {
  transform: scale(1.1);
}

/* ── Spin animation (for processing icon) ─────────────────────── */
.w-icon-spin {
  animation: w-icon-spin 1s linear infinite;
}

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

/* ── Pulse animation (for notifications) ──────────────────────── */
.w-icon-pulse {
  animation: w-icon-pulse 2s ease-in-out infinite;
}

@keyframes w-icon-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}