/**
 * @file icons.css
 * @description Stee Icon System — 26 outline iconen met currentColor
 *
 * Iconen meekleuren met thema via CSS color property:
 *   .icon-primary  → color: var(--primary)
 *   .icon-success  → color: var(--success)
 *   .icon-danger   → color: var(--danger)
 *   .icon-muted    → color: var(--text-muted)
 *   .icon-info     → color: var(--info)
 *   .icon-warning  → color: var(--warning)
 *
 * Gebruik in HTML:
 *   <i class="stee-icon icon-primary" data-icon="home"></i>
 *   <i class="stee-icon icon-muted" data-icon="zoeken" style="font-size:20px"></i>
 *
 * Of inline SVG direct:
 *   <span class="icon-primary"><include href="icons/stee-home.svg"/></span>
 *
 * Datum: 2026-08-12
 */

/* ═══════════════════════════════════════════════════════
   📐 ICON BASISKLASSE
   ═══════════════════════════════════════════════════════ */
.stee-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 24px; /* voor SVG sizing */
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
}

.stee-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Groottes ── */
.stee-icon.sm  { width: 18px; height: 18px; font-size: 18px; }
.stee-icon.md  { width: 24px; height: 24px; font-size: 24px; }
.stee-icon.lg  { width: 32px; height: 32px; font-size: 32px; }
.stee-icon.xl  { width: 48px; height: 48px; font-size: 48px; }

/* ═══════════════════════════════════════════════════════
   🎨 ICON KLEURCLASSES
   ═══════════════════════════════════════════════════════ */
.icon-primary    { color: var(--primary); }
.icon-primary-l  { color: var(--primary-light); }
.icon-success    { color: var(--success); }
.icon-danger     { color: var(--danger); }
.icon-warning    { color: var(--warning); }
.icon-info       { color: var(--info); }
.icon-muted      { color: var(--text-muted); }
.icon-secondary  { color: var(--text-secondary); }
.icon-on-primary { color: var(--text-on-primary); }

/* ── Specifieke contexten ── */
.icon-amount-pos { color: var(--amount-positive); }
.icon-amount-neg { color: var(--amount-negative); }
.icon-nav        { color: var(--nav-inactive-text); }
.icon-nav-active { color: var(--nav-active-bg); }

/* ═══════════════════════════════════════════════════════
   🔄 INTERACTIEVE ICONEN (hover effect)
   ═══════════════════════════════════════════════════════ */
.stee-icon.clickable {
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.stee-icon.clickable:hover {
  color: var(--primary);
  transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════
   📱 NAVIGATIE ICONEN (Android bottom nav)
   ═══════════════════════════════════════════════════════ */
.nav-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  color: var(--text-muted);
  font-size: 0.72em;
  font-family: var(--font-body);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-icon svg {
  width: 22px;
  height: 22px;
}

.nav-icon.active,
.nav-icon:hover {
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════
   🔤 ICON + TEKST COMBINATIES
   ═══════════════════════════════════════════════════════ */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.icon-text .stee-icon {
  flex-shrink: 0;
}