@use 'sass:map';

@use '../style/common/var' as *;
@use '../style/mixins/mixins' as *;

.pagoda-suffix-icon.pagoda-range {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset;
  box-sizing: border-box;
  font-size: 14px;
  transition: var(--el-transition-box-shadow);

  &--focus {
    box-shadow: 0 0 0 1px
      var(--el-input-focus-border-color, var(--el-color-primary)) inset !important;
  }

  &:not(&--focus):hover {
    box-shadow: 0 0 0 1px
      var(--el-input-hover-border-color, var(--el-border-color-hover)) inset;
  }

  .pagoda-range__range-start,
  .pagoda-range__range-end {
    flex: 1;
    .el-input__wrapper {
      box-shadow: none;
      background-color: transparent;
    }
    .el-input__inner {
      text-align: center;
    }
    @include el-form-item-reset(100%);
  }

  .pagoda-range__range-start {
    .el-input {
      .el-input__inner {
        padding-right: 2px;
      }
    }
    .el-input__prefix {
      left: 2px;
      .el-input__icon {
        width: 18px;
      }
    }
  }

  .pagoda-range__range-end {
    .el-input,
    .el-date-editor {
      .el-input__inner {
        padding-left: 2px;
        padding-right: 20px;
      }
    }
  }

  .el-input__suffix {
    right: 4px !important;
  }
  // .pagoda-rang-clear-icon {
  //   display: none;
  //   width: 18px;
  //   cursor: pointer;
  //   line-height: map.get($input-height, 'default');
  // }
  // &--medium {
  //   font-size: map.get($input-font-size, 'medium');

  //   .pagoda-rang-clear-icon {
  //     line-height: map.get($input-height, 'medium');
  //   }
  // }
  // &--small {
  //   font-size: map.get($input-font-size, 'small');

  //   .pagoda-rang-clear-icon {
  //     line-height: map.get($input-height, 'small');
  //   }
  // }
  // &--mini {
  //   font-size: map.get($input-font-size, 'mini');

  //   .pagoda-rang-clear-icon {
  //     line-height: map.get($input-height, 'mini');
  //   }
  // }
}

.el-form-item.is-error {
  .pagoda-range {
    border-color: var(--el-color-danger);
  }
}