.form-switch {
color: #3c4257; cursor: pointer; margin-bottom: 1rem; font-size: 14px; display: block; .switch-wrap + span { vertical-align: top; margin-left: 7px; }
} .switch-wrap {
display: inline-block; position: relative; input[type="checkbox"] { position: absolute; cursor: pointer; opacity: 0; width: 38px; height: 20px; &:checked + .switch { background-color: #cfd1e2; &:after { background-color: #60659d; right: -1px; left: initial; } } } &.focus input[type="checkbox"] + .switch:after { box-shadow: 0 0 0 3px $bg-outline; }
} .switch {
transition: .3s all; width: 38px; height: 20px; position: relative; display: inline-block; background-color: #e2e2e2; border-radius: 20px; &:after { transition: .3s all; position: absolute; content: ''; display: block; background-color: #a3a3a3; @include size(25px); left: -1px; top: -2px; border-radius: 100%; }
}