/* ============================================================
   icon.css - 图标组件
   
   用途: SVG 图标的尺寸和颜色变体
   依赖: core/tokens.css
   前缀: .pg-ico (页面级), .pb-ico (公共级), .pd-ico (详情页级)
   ============================================================ */

/* ============================================================
   通用图标基础样式
   ============================================================ */
.pg-ico,
.pb-ico,
.pd-ico {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   尺寸变体 - pg-ico
   ============================================================ */
.pg-ico--xs { width: var(--icon-xs); height: var(--icon-xs); }
.pg-ico--sm { width: var(--icon-sm); height: var(--icon-sm); }
.pg-ico--lg { width: var(--icon-lg); height: var(--icon-lg); }
.pg-ico--xl { width: var(--icon-xl); height: var(--icon-xl); }
.pg-ico--2xl { width: var(--icon-2xl); height: var(--icon-2xl); }
.pg-ico--xxl { width: var(--icon-xxl); height: var(--icon-xxl); }

/* ============================================================
   尺寸变体 - pb-ico
   ============================================================ */
.pb-ico--xs { width: var(--icon-xs); height: var(--icon-xs); }
.pb-ico--sm { width: var(--icon-sm); height: var(--icon-sm); }
.pb-ico--lg { width: var(--icon-lg); height: var(--icon-lg); }
.pb-ico--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* ============================================================
   尺寸变体 - pd-ico
   ============================================================ */
.pd-ico--xs { width: var(--icon-xs); height: var(--icon-xs); }
.pd-ico--sm { width: var(--icon-sm); height: var(--icon-sm); }
.pd-ico--lg { width: var(--icon-lg); height: var(--icon-lg); }
.pd-ico--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* ============================================================
   颜色变体
   ============================================================ */
.pg-ico--primary,
.pb-ico--primary,
.pd-ico--primary { color: var(--color-primary); }

.pg-ico--success,
.pb-ico--success,
.pd-ico--success { color: var(--color-success); }

.pg-ico--warning,
.pb-ico--warning,
.pd-ico--warning { color: var(--color-warning); }

.pg-ico--danger,
.pb-ico--danger,
.pd-ico--danger { color: var(--color-danger); }

.pg-ico--muted,
.pb-ico--muted,
.pd-ico--muted { color: var(--color-text-muted); }

.pg-ico--text,
.pb-ico--text,
.pd-ico--text { color: var(--color-text-secondary); }

.pg-ico--light,
.pb-ico--light,
.pd-ico--light { color: var(--color-text-inverse); }

.pg-ico--current,
.pb-ico--current,
.pd-ico--current { color: currentColor; }

/* ============================================================
   功能变体
   ============================================================ */
.pg-ico--btn,
.pb-ico--btn,
.pd-ico--btn {
  margin-right: var(--space-2);
}

/* 填充图标 */
.pg-ico--filled {
  fill: currentColor;
  stroke: none;
}
