@use '../../style/themes/default.scss' as *;
@use '../../style/util.scss' as *;
@use './css-var.scss' as *;

@include set-range-input-var($y);

.el-form-item.is-error {
  .y-range-input {
    background: yVar('input-error', 'bg');
    border-color: elVar('color-error');
    box-shadow: yVar('input', 'hover-shadow');

    &:hover:not(.is-disabled) {
      background: yVar('input-error', 'hover-bg');
      border-color: elVar('color-error');
      box-shadow: yVar('input', 'hover-shadow');
    }

    &:focus-within:not(.is-disabled) {
      background: yVar('input-error', 'focus-bg');
      border-color: elVar('color-error');
      box-shadow: yVar('input', 'focus-shadow');
    }
  }
}

.y-range-input {
  width: 100%;
  min-height: elVar('input', 'height');
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: yVar('input', 'border');
  background: yVar('input', 'bg');
  border-radius: yVar('input', 'radius');
  box-sizing: border-box;
  transition: all $transition-base;
  overflow: hidden;
  cursor: text;
  padding-left: yVar('input', 'padding-left');
  padding-right: yVar('input', 'padding-right');

  &:hover:not(.is-disabled) {
    border-color: elVar('color-primary');
    background: yVar('input', 'hover-bg');
    box-shadow: yVar('input', 'hover-shadow');

    .y-range-input-clear {
      display: block;
    }
  }

  &:focus-within:not(.is-disabled) {
    border-color: elVar('color-primary');
    background: yVar('input', 'hover-bg');
    box-shadow: yVar('input', 'hover-shadow');
  }

  /** 左边数字输入  **/
  .y-input-number-left {
    .el-input__wrapper {
      padding-left: 0 !important;
    }
    .el-input__wrapper.is-focus {
      box-shadow: none !important;
    }
  }

  /** 右边数字输入 */
  .y-input-number-right {
    .el-input__wrapper {
      padding-right: 0 !important;
    }
    .el-input__wrapper.is-focus {
      box-shadow: none !important;
    }
  }

  .el-input-number {
    width: 50%;

    .el-input {
      --el-input-hover-border-color: transparent;
      --el-input-focus-border-color: transparent;
    }

    .el-input__wrapper {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }
  }

  .y-range-separator {
    flex-shrink: 0;
    padding: 0 8px;
    color: elVar('text-color', 'placeholder');
    user-select: none;
  }

  .y-range-input-suffix {
    display: flex;
    align-items: center;
    gap: yVar('input', 'icon-space');
  }

  .y-range-input-suffix-content {
    display: flex;
    align-items: center;
    color: inherit;
  }

  .y-range-input-clear {
    cursor: pointer;
    color: yVar('input', 'clear-color');
    transition: color $transition-base;
    display: none;
  }

  &.is-disabled {
    border: yVar('input', 'disabled-border');
    background: yVar('input', 'disabled-bg');
    box-shadow: none;
    cursor: not-allowed;

    .y-range-separator {
      color: yVar('input', 'disabled-color');
    }
  }
}