/* =============================
   CSS 图标库 - 方块图标（统一比例 + 边框自动计算）
============================= */
:root {
    /* 基础大小（对角线） */
    --icon-small-diag: 20;   /* px */
    --icon-medium-diag: 40;
    --icon-large-diag: 80;
    --icon-xlarge-diag: 120;
}

.my-icon {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    color: #3498db;
    isolation: isolate;
}

/* =====================
   核心伪元素样式
===================== */
.my-icon::before,
.my-icon::after {
    content: '';
    position: absolute;
    border-radius: 8%;
    transform: rotate(45deg);
    box-sizing: border-box;
    mix-blend-mode: difference; /* 重叠透明效果 */
}

/* =====================
   尺寸 & 边框变量
===================== */
.my-icon.small {
    width: calc(var(--icon-small-diag) * 1.25px);
    height: calc(var(--icon-small-diag) * 1.25px);
    --before-size: calc(var(--icon-small-diag) * 1px);
    --after-size: calc(var(--icon-small-diag) * 0.75px);
}

.my-icon.medium {
    width: calc(var(--icon-medium-diag) * 1.25px);
    height: calc(var(--icon-medium-diag) * 1.25px);
    --before-size: calc(var(--icon-medium-diag) * 1px);
    --after-size: calc(var(--icon-medium-diag) * 0.75px);
}

.my-icon.large {
    width: calc(var(--icon-large-diag) * 1.25px);
    height: calc(var(--icon-large-diag) * 1.25px);
    --before-size: calc(var(--icon-large-diag) * 1px);
    --after-size: calc(var(--icon-large-diag) * 0.75px);
}

.my-icon.xlarge {
    width: calc(var(--icon-xlarge-diag) * 1.25px);
    height: calc(var(--icon-xlarge-diag) * 1.25px);
    --before-size: calc(var(--icon-xlarge-diag) * 1px);
    --after-size: calc(var(--icon-xlarge-diag) * 0.75px);
}

/* =====================
   before/after 样式计算
   - before = 大方块 (实心)
   - after = 小方块 (描边)
   - 边框 = 小方块对角线/10
===================== */
.my-icon::before {
    width: calc(var(--before-size) / 1.4142);  /* 对角线/√2 = 边长 */
    height: calc(var(--before-size) / 1.4142);
    background-color: currentColor;
    top: 50%;
    right: calc(var(--before-size) * 0.125);  /* 原右边距按比例 */
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
}

.my-icon::after {
    width: calc(var(--after-size) / 1.4142);
    height: calc(var(--after-size) / 1.4142);
    border: calc(var(--after-size) / 7) solid currentColor; /* 边框 = 对角线/10 */
    background: transparent;
    top: 50%;
    left: calc(var(--after-size) * 0.125);
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
}

/* =====================
   颜色变体
===================== */
.my-icon.primary { color: #3498db; }
.my-icon.secondary { color: #2ecc71; }
.my-icon.success { color: #27ae60; }
.my-icon.danger { color: #e74c3c; }
.my-icon.warning { color: #f39c12; }
.my-icon.info { color: #17a2b8; }
.my-icon.light { color: #f8f9fa; }
.my-icon.dark { color: #343a40; }
.my-icon.white { color: #fff; }
.my-icon.black { color: #000; }

/* =====================
   动画效果
===================== */
.my-icon.spin { animation: icon-spin 2s linear infinite; }
@keyframes icon-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.my-icon.pulse { animation: icon-pulse 1.5s ease-in-out infinite; }
@keyframes icon-pulse { 0%,100%{transform:scale(1);}50%{transform:scale(1.1);} }

.my-icon.bounce { animation: icon-bounce 2s infinite; }
@keyframes icon-bounce { 0%,20%,50%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-10px);} 60%{transform:translateY(-5px);} }

/* =====================
   布局/特效
===================== */
.my-icon.shadow { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.my-icon.glow { filter: drop-shadow(0 0 8px currentColor); }
.my-icon.block { display: block; }
.my-icon.inline { display: inline-block; }
.my-icon.center { margin: 0 auto; display: block; }

/* =====================
   响应式
===================== */
@media (max-width: 768px) {
    .my-icon.responsive {
        width: 40px;
        height: 40px;
        --before-size: 28;
        --after-size: 21;
    }
}