/**
 * ETB-XCD Icon System (Lucide SVG Sprite)
 * Version: 1.0.0
 * 
 * Usage:
 * <svg class="etb-icon etb-icon--md" aria-hidden="true">
 *   <use href="/assets/themes/STARTER/images/icons/sprite.svg#icon-phone"></use>
 * </svg>
 */

/* ==========================================================================
   Base Icon Styles
   ========================================================================== */

.etb-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em; /* Align with text baseline */
  flex-shrink: 0;
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

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

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

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

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

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

/* ==========================================================================
   Color Variants (optional)
   ========================================================================== */

.etb-icon--primary {
  stroke: #DA2128; /* ETB brand red */
}

.etb-icon--white {
  stroke: #ffffff;
}

.etb-icon--muted {
  stroke: #999999;
}

/* ==========================================================================
   Special: Filled Icons (for star ratings etc.)
   ========================================================================== */

.etb-icon--filled {
  fill: currentColor;
}

/* ==========================================================================
   Utility: Spin Animation (for loading states)
   ========================================================================== */

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

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