Ошибка переключения: движение по диагонали, а не по прямой. ⇐ CSS

[Anonymous]

Я работаю над переключателем, вот мой код:

Код: Выделить всё

import style from "./Toggle.module.scss";

export default function Toggle() {
return (




);
}

.toggle {
height: 0;
width: 0;
opacity: 0;
}

.label {
width:60px;
height: 30px;
border-radius:30px;
display: block;
background-color: #ebebeb;
box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2) inset;
left:10px;
padding-left: 5px;
position: relative;

&::after {
content: '';
position: absolute;
width: 23px;
height: 23px;
border-radius: 50px;
background-color: green;
top: 50%;
transform: translateY(-50%);
transition: 0.3s;

}
}

.toggle:checked ~ .label::after{

transform: translateX(32px);

}

Изначально ручка идеально центрирована внутри переключателя, но когда я нажимаю на нее, она совершает диагональное движение, а не движется по прямой линии вправо. Подробности см. в кодах и ящике.
https://codesandbox.io/p/sandbox/red-mi ... 2Findex.js

Подробнее здесь: https://stackoverflow.com/questions/784 ... f-straight