/* ============================================================
   ALL-ICONS — paket ikon SVG (terpisah dari materialZ)
   ============================================================
   Berkas ikon: https://cdn.zhyllanfyllah.my.id/cdn/public/all-icons/<nama>.svg
   (mis. add.svg, car-sharp.svg, logo-linkedin.svg)

   Cara panggil (nama ikon ditulis pada --ic):
   <span class="ic" style="--ic:url('https://cdn.zhyllanfyllah.my.id/cdn/public/all-icons/add.svg')"></span>

   - Warna mengikuti `color` (currentColor) — bisa diwariskan dari induk.
   - Ukuran mengikuti `font-size` (1em) — atur lewat kelas atau font-size.
   - Pakai mask, jadi SVG apa pun otomatis ikut warna teks.

   Contoh dengan ukuran & warna:
   <a style="color:var(--m3-primary);font-size:20px">
     <span class="ic" style="--ic:url('https://cdn.zhyllanfyllah.my.id/cdn/public/all-icons/git-branch.svg')"></span>
   </a>

   Tidak ada kelas per-ikon supaya berkas ini tetap ramping dan materialZ
   bisa diganti/dinamis tanpa menyentuh ikon.
   ============================================================ */

.ic{
  --ic: none;
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

.ic-sm{width:.875em;height:.875em;}
.ic-md{width:1.25em;height:1.25em;}
.ic-lg{width:1.5em;height:1.5em;}
.ic-xl{width:2em;height:2em;}
.ic-2xl{width:3em;height:3em;}

.ic-flip-x{transform:scaleX(-1);}
.ic-flip-y{transform:scaleY(-1);}

@media (prefers-reduced-motion: reduce){
  .ic{transition:none;}
}