/* =========================================
   基礎設定：預設 80px，並定義 CSS 變數
========================================= */
.my-icon {
    /* 1. 定義基礎變數 */
    --icon-base-size: 80px;    /* 預設大小為 80px */
    --icon-scale: 1;           /* 預設縮放比例為 1倍 */
    --icon-stroke: 1.6;        /* 預設線條粗細 */

    /* 💡 加入這行：設定預設顏色為 #00adee */
    color: #00adee;            

    display: inline-flex;      /* 使用 flex 讓裡面的 SVG 完美置中對齊 */
    align-items: center;
    justify-content: center;
    
    /* 2. 實際尺寸 = 基礎 80px 乘上 縮放比例 */
    width: calc(var(--icon-base-size) * var(--icon-scale));
    height: calc(var(--icon-base-size) * var(--icon-scale));
    line-height: 1;
}

.my-icon svg {
    width: 100%;
    height: 100%;
}

/* 讓 SVG 內部的所有線條，統一吃我們的粗細變數 */
.my-icon svg * {
    stroke-width: var(--icon-stroke) !important;
}

/* 🌟 新增：讓原本是藍色 (#00ADEE) 的部分，改為吃父層的 color 屬性 */
/* 使用 [fill^="#00ADE"] 是為了同時相容大小寫或微小色差 */
.my-icon svg [fill^="#00ADE" i],
.my-icon svg [fill="currentColor"] {
    fill: currentColor !important;
}

.my-icon svg [stroke^="#00ADE" i],
.my-icon svg [stroke="currentColor"] {
    stroke: currentColor !important;
}

/* =========================================
   大小控制 (Size)
   只改變 --icon-scale 變數，尺寸就會自動計算
========================================= */
.myIcon-2xl  { --icon-scale: 2; }      /* 160px (80 * 2) */
.myIcon-xl   { --icon-scale: 1.5; }    /* 120px (80 * 1.5) */
.myIcon-lg   { --icon-scale: 1.25; }   /* 100px (80 * 1.25) */
.myIcon-sm   { --icon-scale: 0.875; }  /* 70px  (80 * 0.875) */
.myIcon-xs   { --icon-scale: 0.75; }   /* 60px  (80 * 0.75) */
.myIcon-2xs  { --icon-scale: 0.625; }  /* 50px  (80 * 0.625) */


/* =========================================
   粗細控制 (Stroke Width)
   只改變 --icon-stroke 變數
========================================= */
.myIcon-thin    { --icon-stroke: 0.6; }
.myIcon-light   { --icon-stroke: 1.1; }
.myIcon-regular { --icon-stroke: 1.6; } /*預設*/
.myIcon-bold    { --icon-stroke: 2.1; }
.myIcon-heavy   { --icon-stroke: 3.2; }


/* =========================================
   色彩控制 (Color)
   支援直接修改 currentColor
========================================= */
/* 因為 .my-icon 預設是 #00adee，如果你套用下面這些 class，就會覆蓋掉預設顏色 */
.myIcon-color-red { color: #e74c3c; } 
.myIcon-color-green { color: #2ecc71; }
.myIcon-color-black { color: #333333; }