:root {
    --primaryColor: #FC6102;
    --textColor: #666b69;
    --backgroundColor: #333130;
}

/* Switch component */

.Switch > span {
    position: relative;
    padding-left: 3.2em;
    user-select: none; /* just for the demo */
}

.Switch > input[type='checkbox'] {
    height: 1.2em;
    width: 2.55em;
    opacity: 0; /* thanks sara https://vimeo.com/331530115 */
    position: absolute;
    z-index: 1;
}

.Switch > span:before {
    background-color: var(--textColor);
    border-radius: 1.2em;
    border: .1em solid transparent;
    content: '';
    height: 1.2em;
    left: 0;
    position: absolute;
    top: .05em;
    transition: border-color .2s, background-color .2s;
    width: 2.55em;
}

.Switch > span:after {
    background-color: #e6f2ee;
    border-radius: 50%;
    border: .1em solid var(--textColor);
    content: '';
    height: 1.2em;
    left: 0;
    position: absolute;
    top: .05em;
    transition: transform .2s, border-color .2s;
    width: 1.2em;
}

.Switch > input:checked + span:before {
    background-color: var(--primaryColor);
}

.Switch > input:checked + span:after {
    border-color: var(--primaryColor);
    transform: translateX(100%);
}