/* ============================================================
   Creawith Layout Switcher
   黄金比例几何线框射线版（美学比例优化·防抖终极版）
   说明：
   - 采用 absolute 绝对定位与 38px 居中大底盘
   - Grid态：16x12px (饱满的 4:3 竖向卡片比例)
   - List态：向右射线延展至 26px，高度 12px 绝对恒定(防抖)，靠比例变化产生视觉压扁
   - 统一 2px 笔触，3px 挺拔圆角，单色流 currentColor
============================================================ */

/* 1. 基础外壳：38px 居中大底盘 */
.layout-switcher {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    user-select: none;
    background: transparent !important;
    
    /* 坚决消灭原生按钮大黑边与蓝圈轮廓泄漏 */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

/* 2. 上方方块（内容卡片比例模型） */
.cw-layout-icon-box {
    position: absolute;
    left: 6px;                          /* 🌟 居中修正：26px展开后，左右各留6px，在38px容器内完美绝对水平居中 */
    top: 11px;                          /* 🌟 与下方横线组合，实现 38px 容器内的绝对垂直居中 */
    width: 16px;                        /* 常态宽度 W */
    height: 12px;                       /* 🌟 优化：饱满的 4:3 高度，抽象代表网格卡片，高度动效期绝对锁定防抖 */
    border: 2px solid currentColor;     /* 单色流，不变色 */
    background: transparent;
    border-radius: 3px;                 /* 🌟 优化：圆角提升至 3px，匹配 16x12 的卡片圆润度，拒绝生硬 */
    box-sizing: border-box;
    opacity: 0.9;
    
    /* 动效轴心钉死在左侧 */
    transform-origin: left center;
    transition: 
        width 0.26s cubic-bezier(.33,1,.68,1), 
        opacity 0.26s ease, 
        transform 0.26s cubic-bezier(.33,1,.68,1);
    will-change: width, transform;
}

/* 3. 下方横线（布局排版基线） */
.cw-layout-icon-line {
    position: absolute;
    left: 6px;                          /* 与卡片框左侧绝对垂直切齐 */
    top: 25px;                          /* 留出 2px 舒适间距 (11+12+2=25) */
    width: 10px;                        /* 🌟 黄金比例常态内缩：16px * 0.618 ≈ 10px */
    height: 2px;                        /* 笔触厚度 2px */
    background: currentColor;
    border-radius: 999px;
    opacity: 0.9;
    
    transform-origin: left center;
    transition: 
        width 0.26s cubic-bezier(.33,1,.68,1), 
        opacity 0.26s ease, 
        transform 0.26s cubic-bezier(.33,1,.68,1);
    will-change: width, transform;
}

/* ============================================================
   🌟 激活状态机（List 模式）—— 钉死左端，向右侧射线单向延展
============================================================ */

/* 激活态上方框体：顺畅推长至 26px（16px * 1.618黄金比例） */
.layout-switcher.wide .cw-layout-icon-box {
    width: 26px;
    /* 高度和 top 绝对不写！完全依靠宽度拉长产生视觉上的“变扁”错觉，物理防抖 */
}

/* 激活态下方横线：打破常态缩进，射线型向右长出与框体右侧切齐 */
.layout-switcher.wide .cw-layout-icon-line {
    width: 26px;
}

/* ============================================================
   Settle 阶段（阻尼回弹 —— 复刻排序组件机械微颤）
============================================================ */
.layout-switcher.wide.settle .cw-layout-icon-box,
.layout-switcher.wide.settle .cw-layout-icon-line {
    /* 沿左侧锚点向内进行 0.95 阻尼微调 */
    transform: scaleX(0.95);
}