@import '../../styles/mixins/mixins';
@import '../../styles/mixins/utils';
@import '../../styles/common/variables';

@include b(searchbar) {
  position: relative;

  @include b(searchbar-container) {
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    @include e(input) {
      float: left;
      width: $--input-width-base;

      @include deep(el-input__inner) {
        border-radius: $--border-radius-small;
      }
    }

    @include e(filter) {
      margin-left: 20px;
      color: $--color-primary;
      font-size: $--font-size-base;
      &:hover,
      &:focus {
        background: transparent !important;
        color: $--color-primary !important;
        border-color: transparent !important;
      }
      .el-icon-caret-bottom {
        transition: $--all-transition;

        @include when(rotate-180) {
          transform: rotate(180deg);
        }
      }
    }

    @include e(search) {
      padding: 0;
      width: $--button-width-base;
      height: $--button-height-base;
      font-size: 14px;
      border-radius: $--button-border-radius;
      background-color: $--button-primary-background-color;
      -webkit-border-radius: $--button-border-radius;
      -moz-border-radius: $--button-border-radius;
      -ms-border-radius: $--button-border-radius;
      -o-border-radius: $--button-border-radius;
       @include when(margin-left-16) {
        margin-left: 16px;
      }
}

    @include e(reset) {
      padding: 0;
      width: $--button-width-base;
      height: $--button-height-base;
      font-size: 14px;
      border-radius: $--button-border-radius;
      -webkit-border-radius: $--button-border-radius;
      -moz-border-radius: $--button-border-radius;
      -ms-border-radius: $--button-border-radius;
      -o-border-radius: $--button-border-radius;

      &:hover {
        color: #606266 !important;
        border-color: #dcdfe6 !important;
        background: #fff !important;
      }
}

    @include e(listBtns) {
      position: absolute;
      right: 0;
      .el-button--text {
        color: $--color-primary;
      }
    }
  }

  @include b(searchbar-list) {
    box-sizing: border-box;
    position: absolute;
    padding: 16px 24px;
    width: 100%;
    background-color: #fafafa;
    box-shadow: $--shadow-down-3;
    z-index: $--zindex-modal;
    overflow: hidden;

    ::v-deep .el-range-editor--small .el-range-separator {
      line-height: 28px;
    }

    @include e(wrap) {
      border: $--border-base;
      border-bottom: none;
    }

    @include e(footer) {
      display: flex;
      margin-top: 16px;
      &.align-right {
        text-align: right;
        justify-content: flex-end;
      }
    }
  }

  @include b(filter-item) {
    display: flex;
    align-items: stretch;
    border-bottom: $--border-base;
    background-color: #f6f7fb;

    @include e(title) {
      box-sizing: border-box;
      width: 96px;
      height: 48px;
      margin: 0;
      padding: 0 8px;
      line-height: 48px;
      text-align: center;
      color: #5e6470;
      font-size: $--font-size-base;
      font-weight: $--font-weight-normal;
      @include utils-ellipsis;
    }

    @include e(content) {
      margin: 0;
      padding: 0;
      list-style: none;
      flex: 1;
      border-left: $--border-base;
      background-color: #fafafa;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      .el-date-editor {
        border-radius: $--border-radius-small;
      }
    }

    @include e(li) {
      display: flex;
      align-items: center;
      padding: 0 12px;
      line-height: 48px;
      color: transparentize($--color-black, 0.35);
      @include deep(el-select) {
        .el-input__icon {
          line-height: 48px;
        }
      }
    }

    @include e(span) {
      box-sizing: border-box;
      display: block;
      width: 100%;
      height: 100%;
      font-size: $--font-size-base;
      cursor: pointer;

      @include when(active) {
        color: $--color-primary;
      }
    }

    @include e(name) {
      margin-right: 5px;
    }

    @include e(subTitle) {
      float: left;
      margin: 0 8px 0 0;
      font-size: $--font-size-base;
      font-weight: 600;
    }

    @include e(subContent) {
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: #fafafa;
      overflow: hidden;
      .el-date-editor {
        border-radius: $--border-radius-small;
      }
    }

    @include e(subLi) {
      float: left;
      padding: 0 12px;
      line-height: 48px;
      color: transparentize($--color-black, 0.35);
    }

    // @include e(more) {
    //     width: 48px;
    //     height: 48px;
    //     line-height: 48px;
    //     text-align: center;
    //     color: $--color-primary;
    //     background-color: #FAFAFA;
    //     font-size: $--font-size-small;
    //     cursor: pointer;
    // }
  }

  @include b(footer) {
    @include e(save) {
      padding: 0;
      width: $--button-width-base;
      height: $--button-height-base;
      font-size: $--button-font-size;
      border-radius: $--button-border-radius;
      -webkit-border-radius: $--button-border-radius;
      -moz-border-radius: $--button-border-radius;
      -ms-border-radius: $--button-border-radius;
      -o-border-radius: $--button-border-radius;
}

    @include e(condition) {
      margin: 0 16px;
      width: 127px;
      height: 32px;

      @include deep(el-input__inner) {
        border-radius: $--border-radius-small;
      }
    }

    @include e(label) {
      float: left;
      width: 116px;
      @include utils-ellipsis;
    }

    @include e(edit) {
      float: right;
      margin-left: 8px;
      line-height: 34px;
      color: $--color-primary;
    }

    @include e(delete) {
      float: right;
      margin-left: 8px;
      line-height: 34px;
      color: $--color-danger;
    }
  }
}