/* Kole UI Mobile · Icon 样式 — 对齐 .design_library/kole-ui-mobile/spec/移动端规格.md §19
   与图标系统冻结规格 .design_library/kole-ui/icons/ICON-SPEC.md（唯一真源）。

   图标只做三件事：定尺寸、定颜色、可选旋转。它自身**不是热区** ——
   可点目标由包裹它的按钮 / 链接提供（≥ 44px，见规格 §19.5）。

   字形由各端内置表注入（tools/inject-icon-table.mjs），本样式表只负责盒子与颜色：
   SVG 用 currentColor 取色，因此 tone 变体只改 color 一处，不需要给 path 单独上色。

   令牌：尺寸取 --kole-icon-size-*（继承 PC 令牌层），颜色取 --kole-color-*；
   组件级变量 --kole-m-icon-size 可在业务侧覆盖（如放进 44px 的圆形按钮里，或传任意 CSS 长度）。 */

.kole-m-icon {
  --kole-m-icon-size: var(--kole-icon-size-20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--kole-m-icon-size);
  height: var(--kole-m-icon-size);
  font-size: var(--kole-m-icon-size);
  line-height: 1;
  color: inherit;
  vertical-align: -0.125em;
}

/* 变体 size：small 16 / default 20 / large 24 / xlarge 32（移动端正文更大，故不用 PC 的 16 为默认）
   传任意 CSS 长度时端实现写内联 --kole-m-icon-size（对齐 TDesign 的「关键字 + 任意值」双模式） */
.kole-m-icon--small { --kole-m-icon-size: var(--kole-icon-size-16); }
.kole-m-icon--large { --kole-m-icon-size: var(--kole-icon-size-24); }
.kole-m-icon--xlarge { --kole-m-icon-size: 32px; }

/* 变体 tone：default 继承父级文字色（可放进任何容器）；其余取语义色
   语义色与卡片底对比度实测均 ≥ 5.0:1（亮）/ ≥ 5.3:1（暗），满足规格 §19.6 的 3:1 下限 */
.kole-m-icon--brand { color: var(--kole-color-brand); }
.kole-m-icon--secondary { color: var(--kole-color-text-secondary); }
.kole-m-icon--danger { color: var(--kole-color-error); }
.kole-m-icon--success { color: var(--kole-color-success); }
.kole-m-icon--warning { color: var(--kole-color-warning); }

.kole-m-icon__glyph {
  display: block;
  width: 100%;
  height: 100%;
  font-family: inherit;
}

/* 内联 SVG 字形：撑满盒子，viewBox 由端实现按图标查表（有 253 个图标不是 24 网格） */
.kole-m-icon__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* 图标与相邻文字的间距取 4px（规格 §19.5：与按钮内图标一致）。
   图标自己不知道邻居是谁，故给一个可选的尾距修饰类，由宿主按需挂。 */
.kole-m-icon--gap-end { margin-inline-end: var(--kole-space-4); }

/* 变体 spin=true：持续旋转；prefers-reduced-motion 下停止（规格 §19.5 无障碍硬要求） */
.kole-m-icon--spin { animation: kole-m-icon-spin 1s linear infinite; }

@keyframes kole-m-icon-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .kole-m-icon--spin { animation: none; }
}