.ct-checkbox-group {
    font-size: 0;
    display: inline-block;
}
//默认样式
.ct-checkbox {
        padding: 5px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        margin-right: 10px;
        border-radius: 3px;
        font-size: 13px;
        line-height: 1;
        .ct-checkbox-input {
            display: inline-block;
            width: 15px;
            height: 15px;
            background: #fff;
            border-radius: 2px;
            position: relative;
            vertical-align: middle;
            border: 1px solid #e6e6e6;
            transition: .2s ease-in-out;
            cursor: pointer;
            -webkit-appearance: none;
            &::after {
                content: '\e648';
                position: absolute;
                top: 20%;
                left: 10%;
                width: 80%;
                height: 80%;
                font-size: 10px;
                color:#fff;
                transition: .2s ease-in-out;
                will-change: scale;
                transform: scale(0);
            } 
            &:hover {
                 border:1px solid  $primary-bg;
            } 
        }
        .ct-checkbox-label {
            display: inline-block;
            line-height:1;
            vertical-align: middle;
            margin-left: 7px;
        }
        &.is-checked  { 
            .ct-checkbox-input {
                background: $primary-bg;
                border: 1px solid $primary-bg;
                &::after {
                    transform: scale(1);
                }
            }
        }
        &.is-disabled {
            opacity: .6;
            cursor: not-allowed;
            .ct-checkbox-input,.ct-checkbox-input:hover {
                border: 1px solid #ccc;
                background: #fff;
            }
            .ct-checkbox-label {
                color: #ccc;
            }
            //禁用且选中
            &.is-checked {
                .ct-checkbox-input,.ct-checkbox-input:hover {
                    background: #ccc;
                }
            }
        }
 
}
//按钮样式
.ct-checkbox-group__button {
        border-radius: 3px;
        overflow: hidden;
        line-height: 1;
        .ct-checkbox {
            font-size: 13px;
            margin-right: 0;
            padding: 5px 20px;
            border-style:solid ;
            border-color:$border-color;
            border-width: 1px 1px 1px 0;
            border-radius: 0;
            text-align: center;
            display: inline-block;
            transition: .2s ease-in-out;
            cursor: pointer;
            position: relative;
            .ct-checkbox-input {
                opacity: 0;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            .ct-checkbox-label {
                margin-left: 0;
            }
            &:hover {
                .ct-checkbox-label{
                    color: $primary-bg;
                }
            }
            &.is-checked {
                background: $primary-bg;
                border-color:$primary-bg;
                &::after {
                    content: '';
                    position: absolute;
                    top: -1px;
                    bottom: -1px;
                    right: -1px;
                    width: 1px;
                    background:$primary-o-bg;
                }
                .ct-checkbox-label {
                    color: #fff;
                }
            }
            &:first-child {
                border-radius: 3px  0 0 3px;
                border-width: 1px;
                &.is-checked {
                    border-color: $primary-bg $border-color $primary-bg $primary-bg ;
                }
            }
            &:last-child {
                border-radius: 0 3px  3px 0;
                &.is-checked {
                    border-color: $primary-bg $primary-bg $primary-bg;
                }
            }
            &.is-disabled {
                opacity: .6;
                background: #ccc; 
                cursor: not-allowed;
                &.is-checked,&.is-checked:hover {
                    border-color: #ccc;
                    .ct-checkbox-input {
                        cursor: not-allowed;
                    }
                    &::after {
                        background: transparent;
                    }
                    .ct-checkbox-label {
                        color: #fff;
                    }
                }
            }
        }
}