@import "mixins/mixins";
@import "common/var";

@include b(basal-filter) {
    display: flex;

    &__relation {
        position: relative;
        margin-right: 18px;

        .and-line {
            width: 1px;
            height: 100%;
            background: $--color-primary;
            opacity: 0.4;
        }

        .or-line {
            width: 1px;
            height: 100%;
            background: $--button-or-border-color;
            opacity: 0.3;
        }

        .el-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: -11px;
        }
    }

    &__form {
        width: 100%;

        &-item {
            display: flex;
            width: 100%;
            min-height: 52px;
            cursor: pointer;

            &:nth-last-of-type(2) {
                margin-bottom: 8px;
            }

            &:hover {
                background-color: rgba(83, 114, 236, 0.04);
            }

            .el-single-form-item {
                margin-right: 16px;
                margin-top: 8px;
                margin-bottom: 8px;

                .el-form-item {
                    margin-bottom: 0;

                    .el-form-item__error {
                        display: none;
                    }
                }
            }

            .el-basal-filter__key {
                margin-left: 8px;

                .el-input__inner {
                    width: 256px;
                }
            }

            .el-basal-filter__type {
                .el-input__inner {
                    width: 116px;
                }
            }

            .el-basal-filter__value {
                width: 256px;

                .el-input__inner {
                    width: 256px;
                }

                &.el-basal-filter__daterange {
                    width: 400px;

                    .el-date-editor--daterange {
                        width: 400px;
                    }
                }

                &.el-basal-filter__multSelect {
                    width: 400px;
                    .el-input__inner {
                        width: 400px;
                    }
                }

                &.el-basal-filter__number {
                    width: 116px;

                    .el-input__inner {
                        width: 116px;
                    }
                }

                &.el-basal-filter__inputNumber {
                    width: 116px;

                    .el-input-group--append {
                        width: 116px;
                    }

                    .el-input__inner {
                        width: 83px;
                    }

                    .el-input-group__append {
                        padding: 0 9px;
                    }
                }
            }
        }

        &-btn {
            width: 36px;
            height: 36px;
            margin-top: 8px;
            margin-bottom: 8px;
        }
    }

    .el-form-item-btn {
        margin-left: 8px;
        margin-bottom: 0;

        .el-form-item__content {
            line-height: unset;
        }
    }
}