@import "mixins/mixins";

@include b(query-filter) {
  font-size: $--condition-filter-small-font-size;
  
  @include e(normal) {
    display: inline-block;
    min-height: 30px;
    line-height: 30px;
    display: flex;
    flex: 1;

    .normal-condition-form {
      flex: 1;

      .el-form-item {
        margin-bottom: 10px;
      }
    }

    .el-radio-group {
      flex:1;
      line-height: 30px;
      vertical-align: top;
      .el-radio-button__inner {
        padding: 6px 15px;
      }
    }

    .normal__toolbar {
      justify-content: flex-end;
      display: flex;
      align-items: flex-start;
      margin-left: 10px;
      .toolbar__expand-button {
      }
      .toolbar-icon {
        margin-left: 5px;
        padding: 8px 0;
      }
    }
  }
  
  .el-divider {
    margin: 5px;
  }
  
  .el-condition-filter__divider-dashed {
    margin-top: 3px;
    margin-bottom: 7px;
  }
  
  @include e(advance) {
    .query-result {
      line-height: 32px;
      padding-left: 20px;
      position: relative;
      
      .query-result__icon {
        position: absolute;
        top: 0;
        left: 0;
        .el-icon-search {
          line-height: 0;
        }
      }
      .query-result__label {
        margin-top: 5px;
        height: 30px;
        line-height: 25px;
      }
      
      .query-result__detail {
        display: inline-block;
        width: calc(100% - #{$--condition-filter-expander-width} - #{$--condition-filter-label-width} - #{$--condition-filter-label-margin-right});
        
        .query-result__item {
          display: inline-block;
          min-height: 25px;
          line-height: 25px;
          border: 1px solid #d0d0d0;
          padding-left: 10px;
          padding-right: 10px;
          margin-right: 10px;
          margin-top: 5px;
          
          &:last-child {
            margin-right: 0;
          }
          
          .item-value {
            display: inline-block;
            
            .value-clear-icon {
              margin-left: 5px;
              color: #a9a9a9;
              cursor: pointer;
            }
          }
        }
      }
    }

    @include e(senior-expand-container) {
      margin-top: 5px;
    }
    
    .el-condition-filter__button {
      text-align: center;
    }
    
    .advance-condition-form {
      margin-top: 5px;
      .el-pro-form__control {
        .control__expand-button {
          display: none;
        }
      }
      .el-row {
        .el-form-item {
          width: 100%;
        }
      }
      .el-form-item {
        .el-form-item__content {
          height: 30px;
        }
      }
    }
    .el-pro-form__control {
      display: none;
    }
  }

  .el-normal__divider {
    margin-bottom: 0;
    background-color: $--color-primary;
  }
  
  .el-condition-filter__normal > .normal-label,
  .el-condition-filter__senior .query-result .query-result__label {
    display: inline-block;
    vertical-align: top;
    color: $--condition-filter-label-text-color;
    font-weight: $--condition-filter-label-text-font-weight;
    // margin-right: $--condition-filter-label-margin-right;
    width: $--condition-filter-label-width;
    text-align: right;
  }

  .el-condition-filter__normal > .el-condition-filter__normal-container,
  .el-condition-filter__senior .query-result .query-result__detail {
    margin-left: 2px;
  }
  
  .el-form {
    .el-form-item {
      .el-form-item__label {
        color: $--color-black;
        padding: 0 3px 0 0;
      }
    }
    &.el-form--inline {
      .el-form-item {
        &.el-form-item--small {
          .el-form-item__label {
            line-height: inherit;
          }
        }
      }
    }
  }

  @include when(expand) {
    .el-query-filter__normal {
      .el-pro-form__control {
        display: none;
      }
    }
    .el-query-filter__advance {
      .el-pro-form__control {
        display: inherit;
      }
    }
  }
}