Левый переход не работает в обе стороны (работает слева направо, но не наоборот)

const cSwitch = document.querySelectorAll('.cSwitch')[0];

cSwitch.onclick = () => {
  
  (cSwitch.getAttribute('state') === 'on') ? cSwitch.setAttribute('state', 'off') : cSwitch.setAttribute('state', 'on');

}

.cSwitch{
    
    position: relative;
    
    width: 150px;
    aspect-ratio: 2/1;
    
    border-radius: 50px 50px;
  
  background: crimson;
    
}

.cSwitch[state = on] .cSwitch_handle{
    
    position: absolute;
    
    left: 50%;
    
}

.cSwitch_handle{
    
    width: 75px;
    aspect-ratio: 1;
    
    border-radius: 50%;
    
    background: skyblue;
    
    left: 0%;
    
    transition: left 0.5s;
    
}

<div class = "switch-wrapper">
                            
    <div class = "cSwitch" state = "off" id = "neon-switch">
         <div class = "cSwitch_handle"></div>
    </div>
                        
</div>