/* iOS-style toggle. Larger track + knob, soft shadow on the thumb, brand
   color when checked, focus ring on keyboard navigation. */
.switch-wrapper {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;

  input {
    opacity: 0;
    width: 0;
    height: 0;

    &:checked + .slider {
      background-color: #2563eb;

      &:before {
        transform: translateX(20px);
      }
    }

    &:focus-visible + .slider {
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
    }

    &:disabled + .slider {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: background-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 180ms ease;

    &:before {
      position: absolute;
      content: '';
      height: 20px;
      width: 20px;
      left: 2px;
      bottom: 2px;
      background-color: #ffffff;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12),
                  0 2px 4px rgba(15, 23, 42, 0.08);
      transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    &.round {
      border-radius: 999px;
      &:before { border-radius: 50%; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .switch-wrapper .slider,
  .switch-wrapper .slider:before { transition: none; }
}