// 表单基础样式
.form-wrapper {
    // 表单title样式
    .form-title-wrapper ~ .form-title-wrapper {
        margin-top: 20px;
    }
    // 表单元组件样式
    .form-item {
        display: flex;
        width: 100%;
        height: 100%;
    }
    .form-item.has-label-placeholder .el-form-item__label {
        width: 0 !important;
        padding: 0;
        border-left: 1px solid $--border-color-light;
    }
    // label样式
    .el-form-item__label {
        display: flex;
        padding: 0 12px;
        align-items: center;
        justify-content: flex-end;

        .label-text-placeholder {
            display: inline-block;
            line-height: 18px;
        }
        .label-item {
            display: none;
        }
    }
    // 表单元组件主体样式
    .el-form-item__content {
        flex: 1;
    }
    .form-item-content {
        display: flex;
        width: 100%;
    }
    .form-item-block {
        display: block;

        .text-before,
        .text-after {
            display: block;
            line-height: 30px;
        }
    }
    // 表单元组件宽度
    .el-input,
    .el-select,
    .el-autocomplete,
    .el-date-editor,
    .el-cascader {
        flex: 1;
    }
    .el-checkbox {
        vertical-align: top;

        // 解决复选框文案过长不换行问题
        & .el-checkbox__label {
            white-space: normal;
            vertical-align: middle;
        }
    }
    .el-form-item__error {
        position: static;
        padding: 0;
    }
    .is-error .el-form-item__content {
        border: 1px solid $--color-danger;
    }
    // 只读内容容器
    .form-read_text {
        display: flex;
        flex: 1;
        padding: 6px 0;
        min-height: 18px;
        line-height: 18px;
        word-break: break-all;
        word-wrap: break-word;
        align-items: center;
    }
    .text-before,
    .text-after {
        padding: 0 5px;
    }
    .form-footer {
        margin-top: 15px;
        text-align: center;
    }
}

// 格子布局
.form-grid {
    .form-body-wrapper {
        border-top: 1px solid $--border-color-light;
        margin-bottom: 20px;
        & > .el-row {
            display: flex;
            width: 100%;
            border: 1px solid $--border-color-light;
            border-top: 0;
            border-collapse: collapse;

            & > .el-col {
                float: none;
                position: relative;
                vertical-align: middle;

                &:first-child .el-form-item__label {
                    border-left: 0;
                }
            }
        }
        .el-form-item__label {
            border-left: 1px solid $--border-color-light;
            border-right: 1px solid $--border-color-light;
            background-color: $--background-color-base;

            &::before {
                display: none;
            }
        }
        .is-required .label-text-placeholder {
            &::before {
                content: '*';
                color: $--color-danger;
            }
        }
    }
    .form-item {
        margin: 0;

        .el-form-item__label {
            padding: 5px 12px;
        }
    }
    .el-input__inner,
    .el-textarea__inner {
        border: 0;
        padding: 0;
    }
    .el-date-editor .el-input__inner {
        padding-left: 25px;
    }
    .el-range__icon {
        margin-left: 0;
    }
    .el-input-number .el-input__inner {
        border: 1px solid $--border-color-light;
    }
    .el-form-item__content {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 5px 12px;

        .el-input__prefix {
            left: 0;
        }
        .el-input__icon {
            width: 14px;
        }
    }
    .el-row {
        &::before,
        &::after {
            display: none;
        }
    }
    .tag-item {
        display: inline-block;
        &.tag-block {
            display: block;
            margin: 5px 0 10px;
            line-height: 1;
        }
    }
}

// 流式表单布局
.form-flow {
    .form-item {
        margin-bottom: 20px;
    }
    // 表单元组件宽度
    .el-input,
    .el-select,
    .el-autocomplete,
    .el-date-editor,
    .el-cascader {
        margin: 0;
    }
}
