@charset "utf-8";

:root {
    --switcher-circle-size: 20px;
    --switcher-circle-height: 26px;
}

.switcher {
    line-height: var(--switcher-circle-height);
    letter-spacing: 0;
    text-align: center;
    font-size: 1rem;
    position: relative;
    width: 65px;
    border-radius: 15px;
}

.switcher input[type="checkbox"] {
    display: none;
}

.switcher label {
    display: block;
    height: var(--switcher-circle-height);
    border-radius: calc(var(--switcher-circle-height) / 2);
    background-color: #f44e60;
    cursor: pointer;
    margin-bottom: 0rem;
}

.switcher input[type="checkbox"]:disabled + label {
    background-color: #F9A6AF;
}

.switcher input[type="checkbox"]:checked + label {
    background-color: #12bca8;
}

.switcher input[type="checkbox"]:checked:disabled + label {
    background-color: #88DDD3;
}

.switcher label span {
    vertical-align: middle;
}

.switcher label span:after {
    content: attr(data-off);
    padding: 0 0 0 var(--switcher-circle-size);
    vertical-align: text-bottom;
    color: #fff;
}

.switcher input[type="checkbox"]:checked + label span:after {
    content: attr(data-on);
    padding: 0 var(--switcher-circle-size) 0 0;
}

.switcher .switch-circle {
    position: absolute;
    width: var(--switcher-circle-size);
    height: var(--switcher-circle-size);
    background-color: #fff;
    top: 3px;
    left: 4px;
    border-radius: calc(var(--switcher-circle-size) / 2);
    transition: .2s;
    cursor: pointer;
}

.switcher input[type="checkbox"]:checked ~ .switch-circle {
    transform: translateX(37px);
}