input[type=checkbox].tgl {
    display: none;

    // add default box-sizing for this scope
    &,
    &:after,
    &:before,
    & *,
    & *:after,
    & *:before,
    & + .tgl-btn {
        box-sizing: border-box;

        &::selection {
            background: none;
        }
    }

    + .tgl-btn {
        outline: 0;
        display: block;
        width: 40px;
        height: 18px;
        position: relative;
        cursor: pointer;
        user-select: none;

        &:after,
        &:before {
            position: relative;
            display: block;
            content: "";
            width: 12px;
            height: 12px;
        }

        &:after {
            left: 0;
        }

        &:before {
            display: none;
        }
    }

    &:checked + .tgl-btn:after {
        left: 55%;
    }
}

input[type=checkbox].tgl-light {
    + .tgl-btn {
        background: #b5b5b5;
        border-radius: 2em;
        padding: 3px;
        transition: all .4s ease;

        &:after {
            border-radius: 50%;
            background: #EEEEEE;
            transition: all .2s ease;
        }
    }

    &:checked + .tgl-btn {
        background: #55b539;
    }
}