/* ============================================================
   ICON COMPONENT — Template Factory
   ============================================================
   
   Стили для IconRenderer компонента.
   Поддерживает Bootstrap Icons с кастомизацией:
   - Icon sizes (sm, md, lg, xl, 2xl)
   - Icon colors (primary, secondary, success, warning, error, muted)
   - Wrapper styles (circle, square) с фоновыми цветами
   
   NOTE: Bootstrap Icons CDN подключается отдельно в HTML
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
   
   ============================================================ */


/* ============================================================
   ICON WRAPPER — Circle & Square Backgrounds
   ============================================================ */

.icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Circle wrapper */
.icon-wrapper--circle {
  border-radius: 50%;
  padding: var(--space-3);
  min-width: 2.75rem;
  min-height: 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
}

/* Square wrapper */
.icon-wrapper--square {
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-width: 2.75rem;
  min-height: 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
}


/* ============================================================
   WRAPPER BACKGROUND COLORS
   ============================================================ */

.icon-wrapper--bg-primary {
  background-color: var(--primary-soft);
}

.icon-wrapper--bg-success {
  background-color: var(--success-soft);
}

.icon-wrapper--bg-warning {
  background-color: var(--warning-soft);
}

.icon-wrapper--bg-error {
  background-color: var(--error-soft);
}

.icon-wrapper--bg-info {
  background-color: var(--info-soft);
}


/* ============================================================
   ICON SIZES
   ============================================================ */

.icon--sm {
  font-size: var(--text-base);
}

.icon--md {
  font-size: var(--text-lg);
}

.icon--lg {
  font-size: var(--text-xl);
}

.icon--xl {
  font-size: var(--text-2xl);
}

.icon--2xl {
  font-size: var(--text-3xl);
}


/* ============================================================
   ICON COLORS
   ============================================================ */

.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-error {
  color: var(--error);
}

.text-muted {
  color: var(--text-muted);
}


/* ============================================================
   ICON UTILITIES
   ============================================================ */

/* Align icon with text */
.icon--inline {
  vertical-align: middle;
  margin-top: -0.125em; /* optical alignment */
}

/* Icon with spacing */
.icon--mr-1 {
  margin-right: var(--space-1);
}

.icon--mr-2 {
  margin-right: var(--space-2);
}

.icon--ml-1 {
  margin-left: var(--space-1);
}

.icon--ml-2 {
  margin-left: var(--space-2);
}


/* ============================================================
   ICON ANIMATIONS (Optional)
   ============================================================ */

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

.icon--spin {
  animation: icon-spin var(--duration-slow) linear infinite;
}

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

.icon--pulse {
  animation: icon-pulse var(--duration-normal) ease-in-out infinite;
}


/* ============================================================
   RESPONSIVE BEHAVIOR
   ============================================================ */

/* Icons automatically scale with font size */
/* No additional responsive rules needed */


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

/* Icons should have aria-hidden="true" if decorative */
/* IconRenderer adds this automatically */

/* For interactive icons, ensure proper focus states */
button .bi,
a .bi {
  pointer-events: none; /* prevent icon from blocking click events */
}


/* ============================================================
   DARK MODE COMPATIBILITY
   ============================================================ */

/* Icon colors automatically adapt through CSS custom properties */
/* No additional dark mode rules needed */


/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
  /* Hide decorative icons in print */
  .icon-wrapper--circle,
  .icon-wrapper--square {
    display: none;
  }
  
  /* Keep simple icons visible */
  .bi {
    color: currentColor !important;
  }
}