@use 'sass:map';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(batch) {
  @include set-component-css-var('batch', $batch);
  @include set-component-css-var('batch-size', $batch-size);
  @include set-component-css-var('button', $button);
  @include set-component-css-var('input', $input);
  @include set-css-var-value(
    ('batch', 'size'),
    map.get($batch-size, 'default')
  );
  @each $size in (large, small) {
    @include m($size) {
      @include set-css-var-value(
        ('batch', 'size'),
        map.get($batch-size, $size)
      );
    }
  }
  @include e(input) {
    height: getCssVar('batch', 'size');
    .el-input--prefix {
      position: relative;
    }
    .el-input__wrapper {
      padding: 0 2px 0 10px;
    }
    .el-input-group__prepend {
      background: getCssVar('fill', 'color-blank');
      color: getCssVar('input', 'text-color');
      padding: 0;
    }
    .el-input__suffix {
      .el-input__suffix-inner {
        height: 100%;
      }
      .el-input__clear {
        margin: 0;
        order: -1;
      }
    }
    @include e(prepend) {
      height: 100%;
      // margin-right: 40px;
      position: relative;
      .#{$namespace}-select,
      .#{$namespace}-button {
        height: 100%;
        margin: 0 !important;
      }
      .#{$namespace}-input__wrapper {
        height: calc(var(--el-input-height, 32px));
        border: 0 !important;
        box-shadow: none !important;
      }
    }
    @include e(select) {
      margin: 0 !important;
      .select-trigger {
        height: 100%;
        box-sizing: border-box;
        .el-input {
          height: 100%;
          box-sizing: border-box;
          .el-input__prefix {
            position: relative;
            box-sizing: border-box;
            color: getCssVar('input', 'text-color');
          }
          .el-input__inner {
            visibility: hidden;
            position: absolute;
          }
        }
      }
      @include when(disabled) {
        &,
        &:hover,
        &:focus {
          background-color: getCssVar('disabled-bg-color');
          border: none !important;
          box-shadow: none !important;
        }
      }
    }
    @include e(batch-icon) {
      cursor: pointer;
    }
    @include e(batch-tooltip) {
      @include e(textarea) {
        textarea {
          box-shadow: none;
          border-bottom: getCssVar('input', 'border');
          border-radius: getCssVar('border-radius', 'base');
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
        textarea:focus {
          box-shadow: none;
        }
        textarea:hover {
          box-shadow: none;
        }
      }
      @include e(controls) {
        display: flex;
        justify-content: space-between;
        padding: 8px 12px;
        @include e(search-button) {
          outline: none;
          color: getCssVar('button', 'hover-text-color') !important;
          border-color: getCssVar('button', 'hover-border-color') !important;
          background-color: getCssVar('button', 'hover-bg-color') !important;
        }
      }
      @include e(tooltip-icon) {
        box-sizing: border-box;
        height: calc(getCssVar('batch', 'size') - 6px) !important;
        width: calc(getCssVar('batch', 'size') - 6px) !important;
        padding: 4px;
        margin: 4px;
        border-radius: getCssVar('border-radius', 'base');
        background-color: getCssVar('fill-color', 'light');
        cursor: pointer;
        &:active {
          color: getCssVar('button', 'hover-text-color') !important;
        }
      }
    }
  }
  @include e(tag) {
    height: getCssVar('batch', 'size');
    text-align: left;
    .el-tag {
      margin-top: 10px;
      height: 100%;
    }
    @include e(tag-content) {
      height: 300px;
      padding: 0 0 0 20px;
      box-sizing: border-box;
    }
  }

  @include when(disabled) {
    &,
    &:hover,
    &:focus {
      * {
        color: getCssVar('button', 'disabled', 'text-color');
        cursor: not-allowed;
      }
    }
  }
}
@include e(batch-popper) {
  padding: 5px 0 0 0 !important;
}