/* ============================================================================
 * KanomJeen · Icon helpers
 *
 * ไอคอนทุกไฟล์ในโฟลเดอร์นี้เป็น SVG stroke="currentColor"
 * ถ้าใส่เป็น <img> สีจะไม่ตาม CSS — ไฟล์นี้จึงใช้ CSS mask เพื่อให้ได้สีจาก
 * `currentColor` ของ element ที่ครอบ (เปลี่ยนสี/ขนาดได้เหมือนไอคอนฟอนต์)
 *
 * วิธีใช้:
 *   <span class="kj-icon kj-icon--play"></span>              เริ่มเซิร์ฟเวอร์
 *   <span class="kj-icon kj-icon--restart kj-icon--lg"></span>
 *   <button class="kj-btn">…<span class="kj-icon kj-icon--update"></span> อัปเดต</button>
 * ========================================================================= */

.kj-icon {
  display: inline-block;
  width: var(--kj-icon-20, 20px);
  height: var(--kj-icon-20, 20px);
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -.22em;
}

.kj-icon--16 { width: var(--kj-icon-16, 16px); height: var(--kj-icon-16, 16px); }
.kj-icon--lg { width: var(--kj-icon-24, 24px); height: var(--kj-icon-24, 24px); }

/* ---------- icon map (path อ้างอิงจากโฟลเดอร์ icons/ นี้) ---------- */
.kj-icon--dashboard { -webkit-mask-image: url('dashboard.svg'); mask-image: url('dashboard.svg'); }
.kj-icon--play      { -webkit-mask-image: url('play.svg');      mask-image: url('play.svg'); }
.kj-icon--stop      { -webkit-mask-image: url('stop.svg');      mask-image: url('stop.svg'); }
.kj-icon--restart   { -webkit-mask-image: url('restart.svg');   mask-image: url('restart.svg'); }
.kj-icon--update    { -webkit-mask-image: url('update.svg');    mask-image: url('update.svg'); }
.kj-icon--save      { -webkit-mask-image: url('save.svg');      mask-image: url('save.svg'); }
.kj-icon--console   { -webkit-mask-image: url('console.svg');   mask-image: url('console.svg'); }
.kj-icon--players   { -webkit-mask-image: url('players.svg');   mask-image: url('players.svg'); }
.kj-icon--map       { -webkit-mask-image: url('map.svg');       mask-image: url('map.svg'); }
.kj-icon--settings  { -webkit-mask-image: url('settings.svg');  mask-image: url('settings.svg'); }
.kj-icon--files     { -webkit-mask-image: url('files.svg');     mask-image: url('files.svg'); }
.kj-icon--plugins   { -webkit-mask-image: url('plugins.svg');   mask-image: url('plugins.svg'); }
.kj-icon--workshop  { -webkit-mask-image: url('workshop.svg');  mask-image: url('workshop.svg'); }
.kj-icon--backup    { -webkit-mask-image: url('backup.svg');    mask-image: url('backup.svg'); }
.kj-icon--network   { -webkit-mask-image: url('network.svg');   mask-image: url('network.svg'); }
.kj-icon--refresh   { -webkit-mask-image: url('refresh.svg');   mask-image: url('refresh.svg'); }
.kj-icon--copy      { -webkit-mask-image: url('copy.svg');      mask-image: url('copy.svg'); }
.kj-icon--shield    { -webkit-mask-image: url('shield.svg');    mask-image: url('shield.svg'); }
.kj-icon--logout    { -webkit-mask-image: url('logout.svg');    mask-image: url('logout.svg'); }
.kj-icon--alert     { -webkit-mask-image: url('alert.svg');     mask-image: url('alert.svg'); }
.kj-icon--check     { -webkit-mask-image: url('check.svg');     mask-image: url('check.svg'); }
.kj-icon--external  { -webkit-mask-image: url('external.svg');  mask-image: url('external.svg'); }
.kj-icon--ai        { -webkit-mask-image: url('ai.svg');        mask-image: url('ai.svg'); }   /* Freebuff CLI */
.kj-icon--power     { -webkit-mask-image: url('power.svg');     mask-image: url('power.svg'); } /* วัดไฟ/ค่าไฟ */