.toggle {
    appearance: none;
    position: relative;
    display: inline-block;
    box-sizing: content-box;
    width: 2.8em;
    height: 1.47em;
    border: none;
    cursor: pointer;
    border-radius: 1.05em;
    overflow: hidden;
    background-color: #f43f5e;
    transition: background ease 0.3s;
}
  
.toggle:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    width: 1.05em;
    height: 1.05em;
    background: #fff;
    border-radius: 1.05em;
    transition: transform cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
    margin: 0.21em 0.3em;
}
  
.toggle:checked {
    background-color: #6FA8DC;
}
  
.toggle:checked:before {
    transform: translateX(1.20em);
}