/**
 * Icon Utilities - F-032.10
 * Styling for SVG icon system
 */

/* ==================== BASE ICON STYLES ==================== */

.icon {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0; /* Prevent icons from shrinking in flex containers */
}

/* Default size (inherits from font-size or uses 1em) */
.icon {
  width: 1em;
  height: 1em;
}

/* ==================== SIZE VARIANTS ==================== */

.icon-xs {
  width: 12px;
  height: 12px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 24px;
  height: 24px;
}

.icon-lg {
  width: 32px;
  height: 32px;
}

.icon-xl {
  width: 48px;
  height: 48px;
}

.icon-2xl {
  width: 64px;
  height: 64px;
}

/* ==================== STROKE STYLES ==================== */

/* Thin stroke (default is 2) */
.icon-stroke-1 {
  stroke-width: 1;
}

/* Thick stroke */
.icon-stroke-3 {
  stroke-width: 3;
}

/* ==================== COLOR UTILITIES ==================== */

/* Icons use currentColor by default, so they inherit text color */
/* But we can add specific color classes for common cases */

.icon-primary {
  color: var(--color-primary, #3b82f6);
}

.icon-success {
  color: var(--color-success, #22c55e);
}

.icon-warning {
  color: var(--color-warning, #eab308);
}

.icon-error {
  color: var(--color-error, #ef4444);
}

.icon-muted {
  color: var(--text-muted, #64748b);
}

.icon-white {
  color: #ffffff;
}

/* ==================== ALIGNMENT HELPERS ==================== */

.icon-inline {
  vertical-align: middle;
  margin-inline: 0.25em;
}

.icon-leading {
  margin-inline-end: 0.5em;
}

.icon-trailing {
  margin-inline-start: 0.5em;
}

/* ==================== ANIMATION UTILITIES ==================== */

/* Spin animation (for loading states) */
@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon-spin {
  animation: icon-spin 1s linear infinite;
}

/* Pulse animation (for notifications) */
@keyframes icon-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

/* Bounce animation (for emphasis) */
@keyframes icon-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

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

/* ==================== BUTTON ICON STYLES ==================== */

/* Icon inside a button */
button .icon,
a .icon {
  pointer-events: none; /* Prevent icon from blocking button clicks */
}

/* Icon-only buttons */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  min-width: var(--touch-target-min, 44px);
  min-height: var(--touch-target-min, 44px);
}

.btn-icon .icon {
  margin: 0;
}

/* Icon with text in button */
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ==================== BADGE ICON STYLES ==================== */

.badge-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* ==================== RESPONSIVE SIZING ==================== */

/* Scale icons on mobile */
@media (max-width: 480px) {
  .icon-responsive {
    width: 20px;
    height: 20px;
  }

  .icon-responsive.icon-lg {
    width: 28px;
    height: 28px;
  }

  .icon-responsive.icon-xl {
    width: 40px;
    height: 40px;
  }
}

/* ==================== ACCESSIBILITY ==================== */

/* Hide decorative icons from screen readers */
.icon[aria-hidden="true"] {
  /* Already hidden, no additional styling needed */
}

/* Icons with semantic meaning should have aria-label */
.icon[role="img"] {
  /* Ensure it's announced by screen readers */
}

/* ==================== DARK MODE ADJUSTMENTS ==================== */

/* Icons automatically adapt to dark mode via currentColor */
/* But we can add specific overrides if needed */

@media (prefers-color-scheme: dark) {
  /* Example: Make certain icons slightly more visible in dark mode */
  .icon-muted {
    opacity: 0.7;
  }
}

/* ==================== ICON CONTAINERS ==================== */

/* Circle container for icons */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0.5rem;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
}

/* Square container for icons */
.icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 8px);
  padding: 0.5rem;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
}

/* ==================== UTILITY CLASSES ==================== */

/* Flip icon horizontally */
.icon-flip-h {
  transform: scaleX(-1);
}

/* Flip icon vertically */
.icon-flip-v {
  transform: scaleY(-1);
}

/* Rotate icon */
.icon-rotate-90 {
  transform: rotate(90deg);
}

.icon-rotate-180 {
  transform: rotate(180deg);
}

.icon-rotate-270 {
  transform: rotate(270deg);
}