@white: #d9d9d9;
@blue: #40a9ff;
@red: #f5222d;
@yellow: #faad14;

.x-form-react {
    .ant-form-item {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .ant-form-item-has-error .ant-table {
        border: 1px @red solid;
        border-radius: 4px;
    }

    .ant-form-item-has-warning .ant-table {
        border: 1px @yellow solid;
        border-radius: 4px;
    }

    // fix mui 样式冲突
    .ant-form-item-has-error.ant-form-item-has-feedback:after {
        content: '';
    }
    .ant-form-item-has-warning.ant-form-item-has-feedback:after {
        content: '';
    }

    .ant-form-item-has-error .x-table,
    .ant-form-item-has-warning .x-table,
    .ant-form-item-has-error .x-card,
    .ant-form-item-has-warning.x-card {
        .ant-form-item-control:not(.ant-form-item-has-error):not(.ant-form-item-has-warning) {
            .ant-input,
            .ant-input-number,
            .ant-time-picker-input,
            .ant-select .ant-select-selection,
            .ant-transfer-list {
                border-color: @white;
            }

            .ant-input:not([disabled]):hover,
            .ant-input-number:not([disabled]):hover,
            .ant-time-picker-input:not([disabled]):hover,
            .ant-select:not([disabled]):hover .ant-select-selection,
            .ant-transfer-list:not([disabled]):hover {
                border-color: @blue;
            }

            .ant-input:focus,
            .ant-input-focused,
            .ant-input-number:focus,
            .ant-input-number-focused,
            .ant-time-picker-input:focus,
            .ant-time-picker-input-focused,
            .ant-select:focus .ant-select-selection,
            .ant-select-focused .ant-select-selection,
            .ant-transfer-list:focus,
            .ant-transfer-list-focused {
                border-color: @blue;
                box-shadow: none;
            }

            .ant-calendar-picker-icon::after,
            .ant-time-picker-icon::after,
            .ant-picker-icon::after,
            .ant-select-arrow,
            .ant-cascader-picker-arrow {
                color: rgba(0, 0, 0, 0.25);
            }
        }
    }

    .ant-form-item-control-input-content .x-card:not(:first-child) {
        margin-top: 5px;
    }

    .ant-form-item-has-error .x-card {
        border: 1px @red solid;
        border-radius: 4px;

        &.collapse {
            .ant-card-head {
                border-bottom: 1px @red solid;
            }
        }
    }

    .ant-form-item-has-warning .x-card {
        border: 1px @yellow solid;
        border-radius: 4px;

        &.collapse {
            .ant-card-head {
                border-bottom: 1px @yellow solid;
            }
        }
    }

    .x-table-wrapper {
        .ant-table-thead > tr > th,
        .ant-table-tbody > tr > td,
        .ant-table tfoot > tr > th,
        .ant-table tfoot > tr > td,
        .ant-table-footer {
            padding: 5px;
        }

        .ant-table .ant-form-item {
            margin-bottom: 0;
            margin-top: 0;
        }

        .ant-table .ant-table-placeholder {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .ant-empty-normal {
            margin: 5px 0;
        }

        .helper {
            background: #fafafa;
        }

        .actions {
            white-space: nowrap;

            .action {
                &.drag {
                    cursor: grab;
                }
    
                & + .action {
                    margin-left: 5px;
                }
            }
        }
    }

    .x-table-footer {
        display: flex;
        align-items: center;
        color: rgb(136, 136, 136);
        cursor: pointer;

        span {
            margin-left: 5px;
        }
    }

    .x-card {

        &.collapse {
            .ant-card-body {
                display: none;
            }
        }

        .ant-card-head {
            padding: 0 12px;
            font-size: 14px;
            min-height: 40px;
        }

        .ant-card-head-wrapper {
            height: 40px;
        }

        .ant-card-extra {
            padding: 0;
        }

        .ant-card-head-title {
            padding: 4px 0;
        }

        .ant-card-body {
            padding: 5px;
        }

        .action {
            &.drag {
                cursor: grab;
            }

            & + .action {
                margin-left: 5px;
            }
        }
    }

    .x-card-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .x-card-button {
        margin-top: 5px;
        padding: 0;
        width: 100%;
        height: 32px;
        font-size: 14px;
    }

    .x-card-empty {
        cursor: pointer;

        .ant-empty-image {
            height: 60px;
        }
    }

    .x-card-add {
        display: inline-flex;
        align-items: center;

        span {
            margin-left: 5px;
        }
    }

    .x-checkbox-all {
        margin-right: 8px;
    }
}