/*
    复选框
*/

@import "../../less/config/main";
.rotate(@deg) {
    transform: rotate(@deg);
    -ms-transform: rotate(@deg);
    /* IE 9 */
    -moz-transform: rotate(@deg);
    /* Firefox */
    -webkit-transform: rotate(@deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(@deg);
    /* Opera */
}

.cui-checkboxContainer {
    position: relative;
    //width: 15px;
    input[type=checkbox] {
        visibility: hidden;
        &:checked + label {
            i {
                background-color: @c-important-a;
                border: 1px solid @c-important-a;
                &::after {
                    visibility: visible;
                }
                span {
                    visibility: visible;
                }
            }
            &.readOnly > i {
                background-color: @c-light-a;
                border: 1px solid @c-normal-b;
                &::after {
                    border-color: @c-normal-b;
                }
                span {
                    border-color: @c-normal-b;
                }
            }
        }
        &+label.readOnly{
            cursor: no-drop;
        }
    }
    label{
        cursor: pointer;
    }
    label > i {
        position: absolute;
        left: 0;
        top: 0;
        width: 15px;
        height: 15px;
        background-color: @c-common-white;
        border: 1px solid @c-normal-b;
        border-radius: 2px;
        cursor: inherit;
        &::after {
            visibility: hidden;
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 8px;
            height: 5px;
            background: transparent;
            border: 2px solid @c-common-white;
            border-top: none;
            border-right: none;
            .rotate(-45deg);
        }
        span {
            visibility: hidden;
            position: absolute;
            top: 1px;
            left: 2px;
            width: 8px;
            height: 5px;
            background: transparent;
            border: 2px solid @c-common-white;
            border-top: none;
            border-right: none;
            filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=cos(pi()/4), M12=sin(pi()/4), M21=sin(-(pi()/4)), M22=cos(-(pi()/4)));
        }
    }
    label > span {
        position: absolute;
        left: 18px;
        top: -2px;
        font-weight: normal;
        color: @c-common-black;
    }
    &.inline {
        display: inline-block;
        width: 200px;
    }
}