/* ============================================================
   Icon Button — アイコンだけのボタン（ツールバー・付随操作）
   外部アイコン（images/icons/*.svg）は currentColor 設計なので、
   img では色が固定される。mask で字面だけ取り込み、文字色に追従させる。
   形は正方、tap 域は 42px を割らない。通常ボタンの先頭アイコン（leading）も
   同じ .bi 機構を使う。色文法・寸法は Button に揃える（Filled→Tonal→Ghost）。
   ============================================================ */

/* 外部アイコン字面：url を --bi で受け、currentColor で塗る。
   例： <span class="bi" style="--bi:url(images/icons/save.svg)" aria-hidden="true"></span>
   既定サイズは 1.15em＝親の文字に追従（通常ボタンの leading icon 用）。 */
.bi {
  display: inline-block; flex: none;
  width: 1.15em; height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--bi) center / contain no-repeat;
          mask: var(--bi) center / contain no-repeat;
}

/* ── Icon Button 本体（既定＝Ghost：地に溶けるツールバー用） ── */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-main); height: var(--tap-main);     /* 48 正方 */
  border-radius: var(--radius-control);
  color: var(--text-muted);
  transition: background var(--dur-fast), color var(--dur-fast);
  --ripple-tint: color-mix(in srgb, var(--cta) 22%, transparent);
}
.icon-btn .bi { width: 20px; height: 20px; }
.icon-btn:hover, .icon-btn:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn.round { border-radius: 50%; }

/* 階層（Button と同じ色文法） */
.icon-btn.tonal  { background: color-mix(in srgb, var(--cta) 14%, var(--surface)); color: var(--cta); border: 1px solid color-mix(in srgb, var(--cta) 24%, var(--line)); }
.icon-btn.tonal:hover, .icon-btn.tonal:focus-visible { background: color-mix(in srgb, var(--cta) 20%, var(--surface)); }
.icon-btn.filled { background: var(--cta); color: var(--on-cta); --ripple-tint: color-mix(in srgb, var(--on-cta) 26%, transparent); }
.icon-btn.filled:hover, .icon-btn.filled:focus-visible { background: color-mix(in srgb, var(--cta) 90%, #000); }
:root[data-theme="night"] .icon-btn.filled:hover, :root[data-theme="night"] .icon-btn.filled:focus-visible { background: color-mix(in srgb, var(--cta) 90%, #fff); }

/* サイズ（Button と同尺：42 / 48 / 56） */
.icon-btn.sm { width: var(--tap-min); height: var(--tap-min); }
.icon-btn.sm .bi { width: 18px; height: 18px; }
.icon-btn.lg { width: 56px; height: 56px; }
.icon-btn.lg .bi { width: 22px; height: 22px; }