.switcher
    display: inline-block
    vertical-align: middle
    margin: multiple($margin, 1/2)
    &-input
        display: none
        &:checked
            + .switcher-body
                background-color: $green
                .switcher-handle
                    left: 30px

    &-body
        position: relative
        display: inline-block
        width: 60px
        height: 30px
        padding: 0
        border-radius: 30px
        cursor: pointer
        background-color: $gray
        transition: 0.4s

    &-handle
        position: absolute
        left: 0
        content: ''
        display: block
        width: 24px
        height: 24px
        border-radius: 24px
        margin: 3px
        background-color: $white
        transition: 0.4s
        box-shadow: inset 0 -2px 0 $shadow
        &.is-dragging
            transition: 0s

    &.is-slim
        .switcher-body
            width: 70px
            height: 3px
            margin: 12.5px
            background-color: $gray
        .switcher-handle
            margin-top: -11.5px
            margin-left: 7px
            background-color: $dark
        .switcher-input
            &:checked
                + .switcher-body
                    background-color: $gray
                    .switcher-handle
                        background-color: $green