.checkbox
    margin: multiple($margin, 1/2) 0
    &-input
        display: none
        &:checked
            + .checkbox-label .checkbox-box:before
                border: 1px solid $mainColor
                border-left: 0
                border-top: 0
                transform-origin: bottom right
                transform: rotate(45deg)
                width: 8px
                height: 20px
                border-width: 2px
                border-radius: 0
    &-label
        display: inline-flex
        line-height: 24px
        font-size: $font-default
        color: $dark
        &:hover
            color: $mainColor

    &-box
        display: inline
        width: 24px
        height: 24px
        padding: 0
        margin-{$end-direction}: 12px
        cursor: pointer
        &:before
            content: ''
            display: block
            width: 100%
            height: 100%
            border-radius: 4px
            border: 1px solid $gray
            transition: 0.5s
            transform-origin: center right