.switch {
    box-sizing: border-box;
    border: 5px solid transparent;
    background: var(--gray);
    margin: 0 5px 0 10px;
    border-radius: 1000px; /* huge value always retains pill-shape */
    width: calc(2 * var(--col-width) + 10px);
    transition: background .3s;
}

.switch.on {
    background: var(--ubk-blue);
}

.switch .handle {
    height: 100%;
    transition: all .3s;
    display: block;
    position: relative;
}

.switch img {
    transition: all .3s;
    position: absolute;
    left: 0;
    transform: translateX(0);
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 10px 0px var(--dark-gray);
}

.switch.on img {
    left: 100%;
    transform: translateX(-100%);
}