/* ============================================
   前台图标系统（全模板共享，CSS 遮罩方案）
   - 零内联 <svg>：图标几何全部存放在 /assets/svg/*.svg
   - 通过 mask + background-color:currentColor 渲染，
     自动跟随各模板深/浅主题文字色
   - 用法：<i class="icon icon-search" aria-hidden="true"></i>
   ============================================ */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    background-color: currentColor;
    vertical-align: -0.125em;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    line-height: 1;
}

/* 尺寸工具类（匹配原内联 svg 的 width/height 属性） */
.icon-14 { width: 14px; height: 14px; }
.icon-15 { width: 15px; height: 15px; }
.icon-16 { width: 16px; height: 16px; }
.icon-17 { width: 17px; height: 17px; }
.icon-18 { width: 18px; height: 18px; }
.icon-19 { width: 19px; height: 19px; }
.icon-20 { width: 20px; height: 20px; }
.icon-30 { width: 30px; height: 30px; }

/* 各图标遮罩映射 */
.icon-search      { -webkit-mask-image: url("/assets/svg/search.svg");      mask-image: url("/assets/svg/search.svg"); }
.icon-user        { -webkit-mask-image: url("/assets/svg/user.svg");        mask-image: url("/assets/svg/user.svg"); }
.icon-folder      { -webkit-mask-image: url("/assets/svg/folder.svg");      mask-image: url("/assets/svg/folder.svg"); }
.icon-page        { -webkit-mask-image: url("/assets/svg/page.svg");        mask-image: url("/assets/svg/page.svg"); }
.icon-calendar    { -webkit-mask-image: url("/assets/svg/calendar.svg");    mask-image: url("/assets/svg/calendar.svg"); }
.icon-redo        { -webkit-mask-image: url("/assets/svg/redo.svg");        mask-image: url("/assets/svg/redo.svg"); }
.icon-eye         { -webkit-mask-image: url("/assets/svg/eye.svg");         mask-image: url("/assets/svg/eye.svg"); }
.icon-comment     { -webkit-mask-image: url("/assets/svg/comment.svg");     mask-image: url("/assets/svg/comment.svg"); }
.icon-list        { -webkit-mask-image: url("/assets/svg/list.svg");        mask-image: url("/assets/svg/list.svg"); }
.icon-grid        { -webkit-mask-image: url("/assets/svg/grid.svg");        mask-image: url("/assets/svg/grid.svg"); }
.icon-rss         { -webkit-mask-image: url("/assets/svg/rss.svg");         mask-image: url("/assets/svg/rss.svg"); }
.icon-sitemap     { -webkit-mask-image: url("/assets/svg/sitemap.svg");     mask-image: url("/assets/svg/sitemap.svg"); }
.icon-qq          { -webkit-mask-image: url("/assets/svg/qq.svg");          mask-image: url("/assets/svg/qq.svg"); }
.icon-gongan      { -webkit-mask-image: url("/assets/svg/gongan.svg");      mask-image: url("/assets/svg/gongan.svg"); }
.icon-tpl-switch  { -webkit-mask-image: url("/assets/svg/tpl-switch.svg");  mask-image: url("/assets/svg/tpl-switch.svg"); }
.icon-tpl-check   { -webkit-mask-image: url("/assets/svg/tpl-check.svg");   mask-image: url("/assets/svg/tpl-check.svg"); }