.checkbox
    display inline
    // input[type="checkbox"]
    //     opacity 0

    //     +label::after
    //         content none

    // label
    //     position relative
    //     display inline-block
    //     padding-left 22px

    // label::before
    //     height 16px
    //     width 16px
    //     border 1px solid
    //     left 0px
    //     top 3px

    // label::after
    //     height 5px
    //     width 9px
    //     border-left 2px solid
    //     border-bottom 2px solid
    //     transform rotate(-45deg)
    //     left 4px
    //     top 7px

    // input[type="checkbox"]:checked
    //     +label::after
    //         content ""

    // input[type="checkbox"]:focus
    //     +label::before
    //         outline rgb(59, 153, 252) auto 5px

.checkbox label::before
.checkbox label::after
    position absolute
    content ""
    display inline-block


.switch-label
    margin 0 0.5rem

.switch
    position relative
    display inline-block
    width 3rem
    height 1.5rem

    input
        opacity 0
        width 0
        height 0

.slider
    position absolute
    cursor pointer
    top 0
    left 0
    right 0
    bottom 0
    background-color $ui-color-8
    transition .4s

    &:before
        position absolute
        content ""
        height 1rem
        width 1rem
        left 0.25rem
        bottom 0.25rem
        background-color white
        transition .2s

    &.round
        border-radius 34px

        &:before
            border-radius 50%

input
    &:checked
        +.slider
            background-color $ui-color-9

            &:before
                transform translateX(1.5rem)

    &:focus
        +.slider
            box-shadow 0 0 1px $ui-color-9