/* =========================================================
   柠檬 Lemon Park · 图标渲染层
   图标几何数据由 assets/icons.js 注入（--ico 变量），
   本文件只负责尺寸、着色与对齐。
   着色原理：mask + background-color:currentColor
   → 图标颜色自动跟随文字颜色，可用 color 覆盖。
   ========================================================= */

.ic{
  display:inline-block;
  flex:none;
  width:18px;
  height:18px;
  vertical-align:-0.16em;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}

/* 仅在浏览器支持 mask 时才用 currentColor 填充，
   避免降级环境下出现实心色块 */
@supports ((-webkit-mask-image:url()) or (mask-image:url())){
  .ic{
    background-color:currentColor;
    -webkit-mask-image:var(--ico);
    mask-image:var(--ico);
  }
}

.ic.sm{width:15px;height:15px}
.ic.lg{width:22px;height:22px}
.ic.xl{width:28px;height:28px}

/* 尺寸快捷工具类（供外部调用） */
.ic.s12{width:12px;height:12px}
.ic.s16{width:16px;height:16px}
.ic.s20{width:20px;height:20px}
.ic.s24{width:24px;height:24px}
.ic.s32{width:32px;height:32px}
.ic.s46{width:46px;height:46px}
.ic.s58{width:58px;height:58px}
.ic.s82{width:82px;height:82px}