/* COPIED from ~/Desktop/Design System/components/icon-button.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 button  (components/icon-button.css)
   Requires tokens.css + components/icon.css/icon-glyphs.css.
   Spec: components/icon-button.md · Figma: <ButtonIcon> (35:71355) on page "Icon".

   A bare glyph you can click: a 32×32 hit area around an icon that keeps its own
   artboard size (md 20 by default — what Figma shows). For a boxed square button
   with a fill or a line, use `zg-button zg-button--icon-only` instead.

   <button type="button" class="zg-icon-button" aria-label="닫기">
     <i class="zg-icon zg-icon--close" aria-hidden="true"></i>
   </button>
   ========================================================================== */
.zg-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--icon-button-radius);
  background: transparent;
  color: inherit;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-fast) var(--ease-standard);
}
/* the glyph keeps the icon's own size: md 20 unless it carries a size class.
   (Figma's <Icon> wrapper inside <ButtonIcon> is squeezed to 12, but its md 20 artboard overflows it — 20 is what shows.) */

.zg-icon-button:hover { background: var(--icon-button-bg-hover); }
.zg-icon-button:active { background: var(--icon-button-bg-press); }
.zg-icon-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.zg-icon-button:disabled,
.zg-icon-button[aria-disabled="true"] { background: transparent; cursor: not-allowed; }
.zg-icon-button:disabled > .zg-icon,
.zg-icon-button[aria-disabled="true"] > .zg-icon { color: var(--icon-disabled); }

/* ---- --tile: a visible 20 tile (Figma Button Custom collapse toggle, 47 uses). The tile is the button,
        so it keeps Figma's 20 footprint; the glyph is 2/3 of the tile, like an icon frame. ---- */
.zg-icon-button--tile {
  --icon-button-size: var(--icon-button-tile-size);
  background: var(--icon-button-tile-bg);
}
.zg-icon-button--tile > .zg-icon:not(.zg-icon--xs, .zg-icon--sm, .zg-icon--md, .zg-icon--lg, .zg-icon--xl) { --zg-icon-size: calc(var(--icon-button-tile-size) * 2 / 3); }
.zg-icon-button--tile:hover { background: var(--icon-button-tile-bg-hover); }
.zg-icon-button--tile:hover > .zg-icon { color: var(--icon-strong); }

/* ---- --labeled: glyph with a small caption under it (Figma Button: vertical) ---- */
.zg-icon-button--labeled {
  flex-direction: column;
  width: auto;
  height: auto;
  min-width: var(--icon-button-size);
  padding: var(--space-2) var(--space-4);
  color: var(--icon-button-caption);
  font: var(--font-regular) var(--body-2xs-size) / var(--body-2xs-lh) var(--font-sans);
  letter-spacing: var(--tracking);
}
.zg-icon-button--labeled > .zg-icon:not(.zg-icon--xs, .zg-icon--md, .zg-icon--lg, .zg-icon--xl) { --zg-icon-size: var(--icon-sm); }

/* ---- --round: a 24 circle on gray-50 with a 16 glyph (row actions: copy · edit · delete; Figma <Icon> circle lg) */
.zg-icon-button--round {
  --icon-button-size: var(--icon-button-round-size);
  border-radius: var(--radius-full);
  background: var(--icon-button-round-bg);
}
.zg-icon-button--round > .zg-icon { --zg-icon-size: var(--icon-sm); }
.zg-icon-button--round:hover { background: var(--icon-button-round-bg-hover); }
.zg-icon-button--round:hover > .zg-icon { color: var(--icon-strong); }