// 复选框
// 可应用于以下表单控件：
// input[type="radio"]
// input[type="checkbox"]
// 文档结构：
// <div class="checkbox"><input type="checkbox"><i></i></div>
._checkbox(@active_color, @border_color, @background_color, @size, @radius, @elem) {
    @selector: e(@elem);
    @pattern_thickness: round((@size * .1 / 2)) * 2;

    position: relative;
    .inline-block();
    vertical-align: middle;
    font-size: 0;

    &.disabled,
    &[disabled] {
        cursor: not-allowed;
        pointer-events: none;
        .opacity(.5);
    }

    &:active,
    &:hover {
        input[type="radio"],
        input[type="checkbox"] {
            & ~ @{selector} {
                border-color: @active_color;
            }
        }
    }

    input[type="radio"],
    input[type="checkbox"] {
        .appearance-none();
        .size(@size);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        cursor: pointer;
        .opacity(0);

        & ~ @{selector} {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            .size(@size);
            .border-radius(@radius);
            .box-sizing(border-box);
            border: 1px solid @border_color;
            background: @background_color;
            overflow: hidden;

            &:before {
                content: '';
                display: block;
                width: 30%;
                height: 60%;
                margin-top: 5%;
                margin-left: 30%;
                border-right: solid @pattern_thickness @background_color;
                border-bottom: solid @pattern_thickness @background_color;
                .rotate(45deg);
            }

            &:after {
                content: '';
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                .size(100%);
                background: @background_color;
            }
        }

        &:checked ~ @{selector} {
            border-color: @active_color;
            background: @active_color;

            &:after {
                .transition(left .3s);
                left: 100%;
                background: @active_color;
            }
        }
    }
}
.checkbox(@size: 22px, @radius: 4px, @elem: 'i') when (isnumber(@size)) {
    ._checkbox(@checkbox_default_active_color, @checkbox_default_border_color, @checkbox_default_background_color, @size, @radius, @elem);
}
.checkbox(@color, @size: 22px, @radius: 4px, @elem: 'i') when (length(@color) = 1) and (iscolor(@color)) {
    ._checkbox(@color, @checkbox_default_border_color, @checkbox_default_background_color, @size, @radius, @elem);
}
.checkbox(@color, @size: 22px, @radius: 4px, @elem: 'i') when (length(@color) = 2) {
    ._checkbox(extract(@color, 1), extract(@color, 2), @checkbox_default_background_color, @size, @radius, @elem);
}
.checkbox(@color, @size: 22px, @radius: 4px, @elem: 'i') when (length(@color) = 3) {
    ._checkbox(extract(@color, 1), extract(@color, 2), extract(@color, 3), @size, @radius, @elem);
}