.input--switch {
  position: relative;
  cursor: pointer;
  display: inline-block;
  inline-size: 50px;
  block-size: 25px;
  
  border: 1px solid;
  border-radius: 50px;

  background-color: red;
  transition: background-color 500ms;
  &::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2px;
    
    display: block;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 18px;
    
    border: 1px solid;
    background-color: white;
    transition: left 500ms;
  }
  &:has(input:checked) {
    background-color: green;
    &::after {
      left: calc(100% - 22px);
    }
  }
}

.input--switch2 .input--switch2-inner {
  position: relative;
  cursor: pointer;
  
  display:block;
  width: 50px;
  height: 25px;
  
  border: 1px solid;
  border-radius: 2rem;

  background-color: red;
  transition: background-color 500ms;
}
.input--switch2 .input--switch2-inner::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2px;
    
    display: block;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 18px;
    
    border: 1px solid;
    background-color: white;
    transition: left 500ms;
  }
}
.input--switch2 input:checked ~ .input--switch2-inner {
    background-color: green;
}
.input--switch2 input:checked ~ .input--switch2-inner::after {
  left: calc(100% - 22px);
}