.view-checkbox
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    line-height: 1;
    position: relative;

    &-disabled
        cursor: $cursor-disabled

    &:hover 
        .view-checkbox-inner
            border-color: #bcbcbc

    &-inner
        display: inline-block;
        width: 14px;
        height: 14px;
        position: relative;
        top: 0;
        left: 0;
        border: 1px solid $border-color-base;
        border-radius: 2px;
        background-color: #fff;
        transition: border-color $transition-time $ease-in-out, background-color $transition-time @ease-in-out;
        &:after
            content: '';
            display: table;
            width: 4px;
            height: 8px;
            position: absolute;
            top: 1px;
            left: 4px;
            border: 2px solid #fff;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg) scale(0);
            transition: all $transition-time $ease-in-out
    &-large
        & .view-checkbox-inner
            width: 16px
            height: 16px
            &:after
                width: 5px
                height: 9px
    &-small
        font-size: 12px
        & .view-checkbox-inner
            width: 12px
            height: 12px
            &:after
                top: 0
                left: 3px
    &-input
        width: 100%
        height: 100%
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0
        z-index: 1
        cursor: pointer
        opacity: 0
        &[disabled]
            cursor: $cursor-disabled
// 选中状态
.view-checkbox-checked
    &:hover
        .view-checkbox-inner
            border-color: $primary-color
    .view-checkbox-inner
        border-color: $primary-color;
        background-color: $primary-color;
        &:after
            content: '';
            display: table;
            width: 4px;
            height: 8px;
            position: absolute;
            top: 1px;
            left: 4px;
            border: 2px solid #fff;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg) scale(1);
            transition: all $transition-time $ease-in-out
.view-checkbox-large
    .view-checkbox-checked
        .view-checkbox-inner 
            &:after
                width: 5px
                height: 9px
.view-checkbox-small
    .view-checkbox-checked
        .view-checkbox-inner
            &:after
                top: 0
                left: 3px
// 禁用
.view-checkbox-disabled 
    &.view-checkbox-checked 
        &:hover 
            .view-checkbox-inner 
                border-color: $border-color-base
        .view-checkbox-inner 
            background-color: #f3f3f3
            border-color: $border-color-base
            &:after
                animation-name: none
                border-color: #ccc
    &:hover
        .view-checkbox-inner
            border-color: $border-color-base
    .view-checkbox-inner
        border-color: $border-color-base
        background-color: #f3f3f3
        &:after
            animation-name: none
            border-color: #f3f3f3
    .view-checkbox-inner-input
        cursor: default
    & + span
        color: #ccc
        cursor: $cursor-disabled
// 半选状态
.view-checkbox-indeterminate
    .view-checkbox-inner:after
        content: '';
        width: 8px;
        height: 1px;
        transform: scale(1);
        position: absolute;
        left: 2px;
        top: 5px;
    &:hover 
        .view-checkbox-inner 
            border-color: $primary-color
    .view-checkbox-inner
        background-color: $primary-color
        border-color: $primary-color
.view-checkbox-large
    .view-checkbox-indeterminate
        .view-checkbox-inner:after
            width: 10px
            top: 6px
.view-checkbox-small 
    .view-checkbox-indeterminate
        .view-checkbox-inner:after
            width: 6px
            top: 4px
.view-checkbox-wrapper
    cursor: pointer;
    font-size: $font-size-small;
    display: inline-block;
    margin-right: 8px;
    &-disabled
        cursor: $cursor-disabled;
    &.view-checkbox-large
        font-size: $font-size-base
.view-checkbox-wrapper + span,
.view-checkbox+ span 
    margin-right: 4px

.view-checkbox-group
    font-size: $font-size-base
    &-item
        display: inline-block