/* -- Icon component ---------------------------------------- */
/* Styling for Lucide CDN icons (<i data-lucide="name">).     */
/* Lucide replaces <i> with <svg>, these styles target that.  */

@layer components {
  [data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
    pointer-events: none;

    /* -- Sizes via data-size --------------------------------- */
    &[data-size="xs"] {
      width: 0.75rem;
      height: 0.75rem;
    }
    &[data-size="sm"] {
      width: 0.875rem;
      height: 0.875rem;
    }
    &[data-size="md"] {
      width: 1.25rem;
      height: 1.25rem;
    }
    &[data-size="lg"] {
      width: 1.5rem;
      height: 1.5rem;
    }
    &[data-size="xl"] {
      width: 2rem;
      height: 2rem;
    }

    /* -- Spin animation ------------------------------------- */
    &[data-animate="spin"] {
      animation: icon-spin 1s linear infinite;
    }
  }

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

  /* ---- Accessibility ---------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    [data-lucide] {
      animation: none !important;
      transition: none !important;
    }
  }

  @media (prefers-contrast: more) {
    [data-lucide] {
      stroke-width: 2.5;
    }
  }

  @media (forced-colors: active) {
    [data-lucide] {
      color: CanvasText;
    }
  }
}