/* ═══════════════════════════════════════════
   MIUIX CONSOLE — Switch Component
   对应 Miuix Switch.kt — miuixCapsuleShape
   ═══════════════════════════════════════════ */

.mx-switch{
  display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mx-switch input{display:none}

.mx-switch-track{
  width:44px;height:26px;
  background:var(--mx-s4);
  border-radius:var(--mx-r-pill);
  position:relative;
  transition:background var(--mx-d2) var(--mx-ease);
  flex-shrink:0;
}
.mx-switch-thumb{
  position:absolute;top:3px;left:3px;
  width:20px;height:20px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
  transition:transform var(--mx-d2) var(--mx-spring);
}

@keyframes mx-switch-bounce{
  0%{transform:translateX(0)}
  50%{transform:translateX(22px)}
  100%{transform:translateX(20px)}
}

/* Checked */
.mx-switch input:checked + .mx-switch-track{
  background:var(--mx-primary);
}
.mx-switch input:checked + .mx-switch-track .mx-switch-thumb{
  animation:mx-switch-bounce 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* Disabled */
.mx-switch input:disabled + .mx-switch-track{
  opacity:0.4;cursor:not-allowed;
}

/* Label */
.mx-switch-label{
  font-size:14px;color:var(--mx-text);
  transition:color var(--mx-d1);
}

/* Mobile: 加大触控区 */
@media(max-width:767px){
  .mx-switch{min-height:44px;padding:4px 0}
  .mx-switch-track{width:48px;height:28px}
  .mx-switch-thumb{width:22px;height:22px;top:3px;left:3px}
@keyframes mx-switch-bounce-mobile{
  0%{transform:translateX(0)}
  50%{transform:translateX(22px)}
  100%{transform:translateX(20px)}
}
  .mx-switch input:checked + .mx-switch-track .mx-switch-thumb{animation:mx-switch-bounce-mobile 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards}
  .mx-switch-label{font-size:15px}
}