// 表单项基础样式

.ibz-design-container .drag-item-container,
.ibz-design-item.drag-item-container {
    min-height: 58px;
}

.design-form-item.left,
.design-form-item.top,
.design-form-item.right,
.design-form-item.bottom {
    width: 100%;
}

.design-form-item, .ibz-design-other {
    height: 100%;
    width: calc(100% -4px);

    .design-form-label {
        white-space: nowrap;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        overflow: hidden;

        label {
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }

    .design-form-editor-container {
        display: flex;
        align-items: center;
        overflow: hidden;
        width: 100%;

        button, input, textarea, select {
            &[disabled] {
              pointer-events: none;
            }
        }

        .design-form-editor {
            height: inherit;
            display: flex;
            align-items: center;
        }

        .ant-calendar-picker {
            width: 100%;
        }

        .form-editor-item--textarea {
            height: 32px;
        }

        .form-editor-item--slider {
            width: 100%;
            pointer-events: none;

            .el-input-number__decrease,
            .el-input-number__increase,
            .el-input__inner {
                background-color: #f5f5f5;
                color: rgba(0, 0, 0, 0.25);
            }

            .el-input__inner {
                border-color: #d9d9d9;
            }
        }

        .form-editor-item--daterange.el-date-editor--daterange {
            width: 100%;
            padding: 0 10px;
            height: 32px;
            line-height: 32px;
            background-color: #f5f5f5;
            color: rgba(0, 0, 0, 0.25);
            border-color: #d9d9d9;

            .el-range-input,
            .el-range__icon,
            .el-range-separator {
                background-color: inherit;
                color: inherit;
            }
        }
        
        .preview-html{
            width: 100%;
            height: inherit;
            color: rgba(0, 0, 0, 0.25);
            font-size: 14px;
            overflow: hidden;
        }
    }
    .ant-btn {
        width: 100%;
    }
}

// 表单项标签在左
.design-form-item.top {
    .design-form-label {
        margin-bottom: 3px;
    }
}

// 表单项标签在左
.design-form-item.left {
    display: flex;

    .design-form-label {
        label {
            text-align: right;
        }
    }
}

// 表单项标签在右
.design-form-item.right {
    display: flex;
    flex-direction: row-reverse;
}

// 表单项标签在右
.design-form-item.bottom {
    display: flex;
    flex-direction: column-reverse;
}

// 表单项标签在右
.design-form-item.none {
    .design-form-label {
        display: none;
    }
}

.form-item.drag-item-container.active {
    outline: 2px solid var(--item-border-hover-color);
    border: 1px solid var(--item-border-hover-color);
}

.form-item.drag-item-container:hover {
    border-color: var(--item-border-hover-color);

    > .drag-handle {
        display: block;
    }
}
//不同类型的按钮样式
.drag-item-container{             
    //默认
    .ant-btn--default{
        background-color: white;
        color: black;
    }
    //主要
    .ant-btn--primary{
        background-color: #409eff;
        color: white;
        border: #409eff;
    }
    //反向
    .ant-btn--inverse{
        background-color: black;
        color: white;
        border: black;
    }
    //信息
    .ant-btn--info{
        background-color: #909399;
        color: white;
        border: #909399;
    }
    //成功
    .ant-btn--success{
        background-color: #67c23a;
        color: white;
        border:#67c23a;
    }
    //警告
    .ant-btn--warning{
        background-color: #e6a23c;
        color: white;
        border: #e6a23c;
    }
    //危险
    .ant-btn--danger{
        background-color: #f56c6c;
        color: white;
        border: #f56c6c;
    }
    //自定义样式系列
    .ant-btn--style2,.ant-btn--style3,.ant-btn--style4{
        background-color: #409eff;
        color: white;
        border:#409eff;
    }
}

// {
//     width: 100%;
//     border: 1px solid rgba(0, 0, 0, 0.25);
//     margin: 4px 0;
//     background: #f5f5f5;
//     border-radius: 4px;
//     color: rgba(0, 0, 0, 0.25);
//     font-size: 14px;
//     height: 32px;
//     overflow: hidden;
// }