.dy-checkbox {
    position: relative;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    color: #606266;
    cursor: pointer;
    user-select: none;

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

        .dy-checkbox_inner {
            position: relative;
            z-index: 1;
            display: inline-block;
            box-sizing: border-box;
            width: 14px;
            height: 14px;
            border: 1px solid #dcdfe6;
            border-radius: 2px;
            background-color: #fff;
            transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);

            &::after {
                position: absolute;
                top: 1px;
                left: 4px;
                box-sizing: content-box;
                width: 3px;
                height: 7px;
                border: 1px solid #fff;
                border-top: 0;
                border-left: 0;
                transform: rotate(45deg) scaleY(0);
                transform-origin: center;
                transition: transform .15s ease-in .05s;
                content: '';
            }

            &:hover {
                border-color: #409eff;
                transition: border-color .2s ease-in;
            }
        }

        .dy-checkbox_original {
            position: absolute;
            z-index: -1;
            left: 10px;
            width: 0;
            height: 0;
            margin: 0;
            outline: none;
            opacity: 0;
        }
    }

    .dy-checkbox_label {
        display: inline-block;
        padding-left: 10px;
        font-size: 14px;
        line-height: 19px;
    }
}
// 选中的样式
.dy-checkbox.is-checked {
    .dy-checkbox_input {
        .dy-checkbox_inner {
            border-color: #409eff;
            background-color: #409eff;

            &::after {
                transform: rotate(45deg) scaleY(1);
            }
        }
    }

    .dy-checkbox_label {
        color: #409eff;
    }
}

// 禁用按钮样式
.dy-checkbox .is-disabled {
    cursor: not-allowed;

    .dy-checkbox_inner {
        border-color: #e4e7ed;
        background-color: #f5f7fa;
        cursor: not-allowed;

        &::after {
            position: absolute;
            top: 1px;
            left: 4px;
            box-sizing: content-box;
            width: 3px;
            height: 7px;
            border: 1px solid #fff;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg) scaleY(0);
            transform-origin: center;
            transition: transform .15s ease-in .05s;
            cursor: not-allowed;
            content: '';
        }

        &:hover {
            border-color: #e4e7ed;
        }

        .dy-checkbox_label {
            cursor: not-allowed;
        }
    }

    .dy-checkbox_input {
        cursor: not-allowed;
    }

    &.is-checked {
        .dy-checkbox_inner {
            border-color: #ebeef5;
            background-color: #f5f7fa;

            &::after {
                border-color: #c0c4cc;
            }
        }
    }

    .dy-checkbox_label {
        color: #c0c4cc;
        cursor: not-allowed;
    }
}

.dy-checkbox .is-indeterminate {
    .dy-checkbox_inner {
        border-color: #409eff;
        background-color: #409eff;

        &::before {
            position: absolute;
            top: 5px;
            left: 0;
            right: 0;
            display: block;
            height: 2px;
            background-color: #fff;
            transform: scale(.5);
            content: '';
        }

        &::after {
            display: none;
        }
    }
}