/* Editor icon sheet — ICON_SYSTEM (roadmap E1; docs/tads/completed/ICON_SYSTEM_TAD.md).
 *
 * One full-color 44×44 sprite sheet, 8 cells/row. The 0-based cell index is the
 * contract: cell N == names[N] in icons.manifest.json. Light/dark are separate
 * sheets (same grid) swapped by [data-theme] — light is the unconditional
 * default (matches tokens.css). Draw at 44×44 native, shown pixelated.
 *
 * Positioning is PERCENTAGE-based (background-size: 800% 500%), which makes the
 * sheet size-independent: one .gb-icon renders at any box size — 44px in
 * toolbar buttons (default), 24px inline via .gb-icon--sm — with no per-size
 * offset math. At 44px the sheet renders 1:1 (crisp); smaller sizes scale down.
 *
 * icons-dark.png is NOT hand-drawn — tools/gen_icon_dark.py generates it from
 * icons-light.png via the icons.palette.json colour swap (edit light sheet, re-run).
 *
 * The `.gb-icon--<name>` background-position block below is GENERATED — run
 * `python3 tools/gen_icon_template.py --css-only` and paste on any manifest
 * change (append-only; never renumber). To add an icon: append a name to the
 * manifest, draw the numbered cell in icons-light.png, re-run gen_icon_dark.py,
 * paste the new rule here.
 */

.gb-icon {
  display: inline-block;
  flex: none;
  width: var(--size-icon);
  height: var(--size-icon);
  vertical-align: middle;   /* align with adjacent text in icon+label buttons */
  background-image: url("/shared/icons/icons-light.png");
  background-repeat: no-repeat;
  background-size: var(--icon-sheet-size);   /* generated below; tracks row count */
  image-rendering: pixelated;
}
:root[data-theme="dark"] .gb-icon {
  background-image: url("/shared/icons/icons-dark.png");
}

/* Inline / compact variant — status markers, list-row affordances, chevrons in
   cards. Sized down from the 44px button default; percentage positions carry
   over unchanged. */
.gb-icon--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }

/* Close buttons migrate app-wide through the shared aria-label selector — no
 * per-modal markup change. Supersedes the masked-SVG × from CSS_THEME_ARC Z+1
 * (removed from primitives.css). The literal ×/✕ text child stays as a
 * font-size:0 fallback; the sheet's `close` (cell 0) paints via ::before. */
.gb-button--icon[aria-label="Close"] { font-size: 0; }
.gb-button--icon[aria-label="Close"]::before {
  content: "";
  display: block;
  /* flex: none so the icon-button's inline-flex layout can't shrink this
     44px pseudo to the ~42px border-box content width — that squished the
     square close cell into a 42×44 box and read as a stretched ×. */
  flex: none;
  width: var(--size-icon);
  height: var(--size-icon);
  background: url("/shared/icons/icons-light.png") 0% 0% / var(--icon-sheet-size) no-repeat;
  image-rendering: pixelated;
}
:root[data-theme="dark"] .gb-button--icon[aria-label="Close"]::before {
  background-image: url("/shared/icons/icons-dark.png");
}

/* --- generated: gen_icon_template.py --css-only --- */
:root { --icon-sheet-size: 800% 500%; }
.gb-icon--close { background-position: 0% 0%; }
.gb-icon--nav-menu { background-position: 14.2857% 0%; }
.gb-icon--undo { background-position: 28.5714% 0%; }
.gb-icon--apply { background-position: 42.8571% 0%; }
.gb-icon--info { background-position: 57.1429% 0%; }
.gb-icon--settings { background-position: 71.4286% 0%; }
.gb-icon--add { background-position: 85.7143% 0%; }
.gb-icon--remove { background-position: 100% 0%; }
.gb-icon--delete { background-position: 0% 25%; }
.gb-icon--edit { background-position: 14.2857% 25%; }
.gb-icon--replace-image { background-position: 28.5714% 25%; }
.gb-icon--chevron-up { background-position: 42.8571% 25%; }
.gb-icon--chevron-down { background-position: 57.1429% 25%; }
.gb-icon--chevron-left { background-position: 71.4286% 25%; }
.gb-icon--chevron-right { background-position: 85.7143% 25%; }
.gb-icon--drag-handle { background-position: 100% 25%; }
.gb-icon--rotate { background-position: 0% 50%; }
.gb-icon--arrow-right { background-position: 14.2857% 50%; }
.gb-icon--mode-collision { background-position: 28.5714% 50%; }
.gb-icon--mode-portal { background-position: 42.8571% 50%; }
.gb-icon--mode-search { background-position: 57.1429% 50%; }
.gb-icon--mode-actor { background-position: 71.4286% 50%; }
.gb-icon--mode-swap { background-position: 85.7143% 50%; }
.gb-icon--tool-move { background-position: 100% 50%; }
.gb-icon--tool-brush { background-position: 0% 75%; }
.gb-icon--tool-eraser { background-position: 14.2857% 75%; }
.gb-icon--tool-inspect { background-position: 28.5714% 75%; }
.gb-icon--flags { background-position: 42.8571% 75%; }
.gb-icon--play { background-position: 57.1429% 75%; }
.gb-icon--pause { background-position: 71.4286% 75%; }
.gb-icon--stop { background-position: 85.7143% 75%; }
.gb-icon--download { background-position: 100% 75%; }
.gb-icon--log { background-position: 0% 100%; }
.gb-icon--warning { background-position: 14.2857% 100%; }
.gb-icon--lock { background-position: 28.5714% 100%; }
/* --- end generated --- */