.frogSwitch {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.frogSwitchControl {
    display: inline-block;
    position: relative;
    width: 3.5rem;
    height: 2rem;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
    user-select: none;
}
.frogSwitchTrack {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    border-radius: 999px;
    transition:
        background-color .15s ease-in-out,
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
}
.frogSwitchThumb {
    position: absolute;
    top: .25rem;
    left: .25rem;
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    transition:
        left .15s ease-in-out,
        background-color .15s ease-in-out,
        box-shadow .15s ease-in-out,
        transform .08s ease-in-out;
}
.frogSwitchChecked .frogSwitchThumb {
    left: 1.75rem;
}
.frogSwitchActive:not(.frogSwitchDisabled):not(.frogSwitchReadOnly) .frogSwitchThumb {
    transform: scale(.92);
}
.frogSwitchDisabled .frogSwitchControl,
.frogSwitchReadOnly .frogSwitchControl {
    cursor: default;
}