/* ============================================================
 * Switch 开关组件
 * 纯 CSS 实现，基于 <label> + <input type="checkbox">
 * ============================================================ */

/* ---------- 基础开关 ---------- */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    min-height: 42px;
}
.switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ---------- 轨道 ---------- */
.switch-track {
    position: relative;
    width: 44px;
    height: 24px;
    background: #ddd;
    border-radius: 12px;
    transition: background .25s ease;
    flex-shrink: 0;
}

/* ---------- 滑块 ---------- */
.switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .25s ease, box-shadow .2s;
}

/* 悬停 */
.switch:hover .switch-thumb {
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* 选中态 */
.switch input[type="checkbox"]:checked ~ .switch-track {
    background: var(--primary, #005A64);
}
.switch input[type="checkbox"]:checked ~ .switch-track .switch-thumb {
    transform: translateX(20px);
}

/* 按下态 */
.switch:active .switch-thumb {
    width: 24px;
}
.switch input[type="checkbox"]:checked ~ .switch-track .switch-thumb:active,
.switch:active input[type="checkbox"]:checked ~ .switch-track .switch-thumb {
    transform: translateX(16px);
}

/* ---------- 标签文字 ---------- */
.switch-label {
    font-size: 14px;
    color: var(--text-main, #2C3E50);
}

/* ---------- 尺寸 ---------- */
/* 小号 */
.switch-sm .switch-track {
    width: 36px;
    height: 20px;
    border-radius: 10px;
}
.switch-sm .switch-thumb {
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
}
.switch-sm input[type="checkbox"]:checked ~ .switch-track .switch-thumb {
    transform: translateX(16px);
}
.switch-sm .switch-label {
    font-size: 13px;
}

/* 大号 */
.switch-lg .switch-track {
    width: 52px;
    height: 28px;
    border-radius: 14px;
}
.switch-lg .switch-thumb {
    width: 24px;
    height: 24px;
    top: 2px;
    left: 2px;
}
.switch-lg input[type="checkbox"]:checked ~ .switch-track .switch-thumb {
    transform: translateX(24px);
}
.switch-lg .switch-label {
    font-size: 15px;
}

/* ---------- 颜色变体 ---------- */
.switch-success input[type="checkbox"]:checked ~ .switch-track {
    background: #27AE60;
}
.switch-warning input[type="checkbox"]:checked ~ .switch-track {
    background: #F39C12;
}
.switch-danger input[type="checkbox"]:checked ~ .switch-track {
    background: #E74C3C;
}
.switch-info input[type="checkbox"]:checked ~ .switch-track {
    background: #3498DB;
}

/* ---------- 禁用 ---------- */
.switch-disabled,
.switch input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .5;
}
.switch input[type="checkbox"]:disabled ~ .switch-track {
    background: #eee;
}

/* ---------- 带文字/图标的开关 ---------- */
.switch-text .switch-track::before,
.switch-text .switch-track::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 500;
}
.switch-text .switch-track::before {
    content: '开';
    left: 7px;
    color: #fff;
    opacity: 0;
    transition: opacity .2s;
}
.switch-text .switch-track::after {
    content: '关';
    right: 7px;
    color: var(--text-sub, #999);
    transition: opacity .2s;
}
.switch-text input[type="checkbox"]:checked ~ .switch-track::before {
    opacity: 1;
}
.switch-text input[type="checkbox"]:checked ~ .switch-track::after {
    opacity: 0;
}

/* ---------- 加载态 ---------- */
.switch-loading .switch-thumb::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid var(--primary, #005A64);
    border-right-color: transparent;
    border-radius: 50%;
    animation: switch-spin .6s linear infinite;
}
@keyframes switch-spin {
    to { transform: rotate(360deg); }
}

/* ---------- 移动端适配 ---------- */
@media (max-width: 768px) {
    .switch { min-height: 38px; }
}
@media (max-width: 480px) {
    .switch { min-height: 36px; }
}