/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-04 09:57:28 
 */ 
@import "../../app/variables.less";

.@{ult-prefix}-checkbox {    
    cursor: pointer;
    position: relative;
    display: block;
    padding-left: 14px + @base-space;
    font-size: @font-size-base;
    line-height: @base-space * 2;
    margin-top: @base-space * 2;
    margin-bottom: @base-space * 2;
    &-inline {
        display: inline-block;
        margin-top: @base-space;
        margin-bottom: @base-space;
        &:not(:last-child) {
            margin-right: @base-space * 4;
        }
    }
    &-inner {
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 1px solid #bdbdbd;
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 3;
        margin-top: -7px;
        transition: @trans;
        &.@{ult-prefix}-checkbox-type {
            border-radius: @border-radius;
        }
        &.@{ult-prefix}-radio-type {
            border-radius: 50%;
        }
    }
    &:hover:not(.disabled) {
        .@{ult-prefix}-checkbox-inner {
            border-color: @primary;
        }
    }
    > input[type="checkbox"], > input[type="radio"] {
        opacity: 0;
        font-size: @font-size-base;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
    &.checked {
        .@{ult-prefix}-checkbox-type {
            border-color: @primary;
            background-color: @primary;
            &::after {
                content: '';
                position: absolute;
                width: 6px;
                height: 4px;
                border-style: solid;
                border-width: 0 0 2px 2px;
                border-color: transparent transparent @white @white;
                border-radius: 1px;
                top: 2px;
                left: 2px;
                transform: rotate(-45deg);
            }
        }
        .@{ult-prefix}-radio-type {
            border-color: @primary;
            &::after {
                content: '';
                position: absolute;
                width: 6px;
                height: 6px;
                border-radius: 3px;
                top: 3px;
                left: 3px;
                background-color: @primary;
            }
        }
    }
    &.disabled {
        color: @text-disable;
        cursor: not-allowed;
        .@{ult-prefix}-checkbox-inner {
            border-color: @input-disable-border;
            background-color: @input-disable-bg;
        }
    }
    &-group-button {
        .@{ult-prefix}-checkbox {            
            transition: @trans;
            vertical-align: middle;
            line-height: @btn-line-height;
            border-radius: @btn-border-radius;
            padding: @btn-padding-vertical @btn-padding-horizontal;
            border: 1px solid @btn-default-border;
            background-color: @btn-default-bg;
            color: @btn-default-color;
            white-space: nowrap;
            margin: 0;
            .@{ult-prefix}-checkbox-inner {
                display: none;
            }
            &:hover {
                border-color: @btn-default-border-hover;
                background-color: @btn-default-bg-hover;
                color: @btn-default-color-hover;
            }
            &.checked {
                border-color: @btn-default-border-active;
                background-color: @btn-default-bg-active;
                color: @btn-default-color-active;
            }
            &.disabled {
                cursor: not-allowed;
                &,
                &:hover,
                &:active {
                    background-color: @btn-disable-bg;
                    border-color: @btn-disable-border;
                    color: @btn-disable-color;
                }
            }
        }
    }
}