/* COPIED from ~/Desktop/Design System/components/icon.css on 2026-10-20 by selfprint/tools/build_zds.py.
   Do not edit here — change the Design System, then re-run the script. */
/* =============================================================================
   Zigu — Icon & Icon frame  (components/icon.css)
   Requires tokens.css and components/icon-glyphs.css (generated glyph classes).
   Spec: components/icon.md · Figma: page "Icon" (5:1636)

   Every glyph lives in a full 24×24 artboard and is optically sized inside it
   on purpose — the artboard is what gets scaled, never the glyph bounds.
   ========================================================================== */

/* ---- icon ------------------------------------------------------------------ */
.zg-icon {
  --zg-icon-size: var(--icon-md);                   /* 20 — most used size */
  display: inline-block;
  flex: none;
  width: var(--zg-icon-size);
  height: var(--zg-icon-size);
  color: var(--icon-default);
  background-color: currentColor;
  -webkit-mask: var(--zg-icon-svg) center / 100% 100% no-repeat;
          mask: var(--zg-icon-svg) center / 100% 100% no-repeat;
  vertical-align: middle;
  font-style: normal;
}

/* artboard sizes */
.zg-icon--xs { --zg-icon-size: var(--icon-xs); } /* 12 */
.zg-icon--sm { --zg-icon-size: var(--icon-sm); } /* 16 */
.zg-icon--md { --zg-icon-size: var(--icon-md); } /* 20 */
.zg-icon--lg { --zg-icon-size: var(--icon-lg); } /* 24 */
.zg-icon--xl { --zg-icon-size: var(--icon-xl); } /* 32 */
.zg-icon--em { --zg-icon-size: 1.25em; }         /* inline with text: artboard ≈ line box */

/* tones — color only; status-* glyphs come with their own status color */
.zg-icon--inherit  { color: inherit; }
.zg-icon--subtle   { color: var(--icon-subtle); }
.zg-icon--strong   { color: var(--icon-strong); }
.zg-icon--disabled { color: var(--icon-disabled); }
.zg-icon--primary  { color: var(--primary); }
.zg-icon--danger   { color: var(--danger); }
.zg-icon--success  { color: var(--success); }
.zg-icon--warning  { color: var(--warning); }
.zg-icon--info     { color: var(--info); }
.zg-icon--inverse  { color: var(--text-inverse); }

/* a glyph that points along the words (indent →, "next" ›, "back" ‹) turns around in right-to-left words.
   Glyphs that point at a place (↑ ↓, a map pin) or are objects (copy, trash) never take it. */
.zg-icon--flip-rtl:dir(rtl) { transform: scaleX(-1); }

/* ---- icon frame (Figma <Icon> variants circle / circleLine / roundSquare / roundSquare_dark) ----
   The glyph artboard scales with the frame at a fixed 2/3: 12→8 · 16→10.7 · 20→13.3 · 24→16 · 32→21.3 */
.zg-icon-box {
  --zg-icon-box: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: var(--zg-icon-box);
  height: var(--zg-icon-box);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.zg-icon-box > .zg-icon { --zg-icon-size: calc(var(--zg-icon-box) * 2 / 3); }

.zg-icon-box--xs { --zg-icon-box: 12px; }
.zg-icon-box--sm { --zg-icon-box: 16px; }
.zg-icon-box--md { --zg-icon-box: 20px; }
.zg-icon-box--lg { --zg-icon-box: 24px; }
.zg-icon-box--xl { --zg-icon-box: 32px; border-radius: var(--radius-md); }

.zg-icon-box--circle      { border-radius: var(--radius-full); background: var(--icon-box-circle-bg); }
.zg-icon-box--circle-line { border-radius: var(--radius-full); background: var(--icon-box-circle-line-bg); box-shadow: inset 0 0 0 1px var(--icon-box-circle-line-border); }
.zg-icon-box--square-fill { background: var(--icon-box-square-fill-bg); }
.zg-icon-box--square-line { background: var(--icon-box-square-line-bg); box-shadow: inset 0 0 0 1px var(--icon-box-square-line-border); }
.zg-icon-box--square-dark { background: var(--icon-box-square-dark-bg); }
.zg-icon-box--square-dark > .zg-icon { color: var(--icon-box-square-dark-fg); }