.input-clear {
  padding: 0 @Form-input-clearBtn-padding;
  cursor: pointer;
  display: flex;
  // display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  text-decoration: none;

  svg {
    color: @Form-input-clearBtn-color;
    // top: 0;
    // width: 16px;
    // height: 14px;
  }

  &:hover svg {
    color: @Form-input-clearBtn-color-onHover;
  }

  &:active svg {
    color: @Form-input-clearBtn-color-onActive;
  }
}

.input-input {
  display: flex;
  flex: 1;
  align-items: center;
  background: var(--color-bg-2);
  border: @Form-input-borderWidth solid @Form-input-borderColor;
  border-radius: @Form-input-borderRadius;
  // height: var(--Form-input-height);
  line-height: @Form-input-lineHeight;
  padding: @Form-input-paddingY @Form-input-paddingX;
  font-size: @Form-input-fontSize;
  // flex-wrap: wrap;
  justify-content: flex-start;
  transition: border-color @animation-duration;

  &.is-quick-edit {
    border-color: transparent;
  }
  &.is-quick-static {
    border-color: transparent;
    &:hover {
      border-color: transparent;
    }
  }

  &.is-disabled {
    cursor: not-allowed;
    input {
      color: var(--color-text-3);
      cursor: not-allowed;
    }
  }
  input {
    flex-basis: 80px;
    flex-grow: 1;
    outline: none;
    background: transparent;
    border: none;
    color: @Form-input-color;
    width: 100%;
    // height: calc(@Form-input-lineHeight * @Form-input-fontSize);

    &::placeholder {
      color: @Form-input-placeholderColor;
      user-select: none;
    }
  }

  &:hover {
    border-color: @Form-input-onFocused-borderColor;
  }
}

.input-border {
  &--borderHalf {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
  }

  &--borderNone {
    border-color: transparent !important;
  }
}

.is-quick-static {
  position: relative;
  font-size: @QuickStatic-fontSize;
  padding: @QuickStatic-paddingY @QuickStatic-paddingX;
  min-height: @QuickStatic-minHeight;
  // line-height: @QuickStatic-minHeight;
  outline: none;
  border: @QuickStatic-borderWidth solid transparent !important;
  // cursor: auto !important;
  background-color: transparent !important;
  color: @Quick-static-color;
  word-wrap: break-word;
  overflow: hidden;
  // display: inline-flex;
  .static-span {
    color: @QuickStatic-placeholder-color;
  }
  &.is-quick-static-table {
    width: 100%;
    // display: inherit;
    padding: 0 !important;
    min-height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .static-span {
      display: none;
    }
    .quickStaticStr {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

// input大小
.input-size() {
  &--xs {
    .button-size(
      @Button--xs-paddingY,
      @Button--xs-paddingX,
      @Button--xs-fontSize,
      @Button--xs-lineHeight,
      @Button--sm-borderRadius,
      @Button--xs-height
    );
  }

  &--sm {
    .button-size(
      @Button--sm-paddingY,
      @Button--sm-paddingX,
      @Button--sm-fontSize,
      @Button--sm-lineHeight,
      @Button--sm-borderRadius,
      @Button--sm-height
    );
  }

  &--md {
    .button-size(
      @Button--md-paddingY,
      @Button--md-paddingX - 4px,
      @Button--md-fontSize,
      @Button--md-lineHeight,
      @Button-borderRadius,
      @Button--md-height
    );
  }

  &--xl {
    .button-size(
      @Button--xl-paddingY,
      @Button--xl-paddingX,
      @Button--xl-fontSize,
      @Button--xl-lineHeight,
      @Button-borderRadius,
      @Button--xl-height
    );
  }

  &--lg {
    .button-size(
      @Button--lg-paddingY,
      @Button--lg-paddingX,
      @Button--lg-fontSize,
      @Button--lg-lineHeight,
      @Button--lg-borderRadius,
      @Button--lg-height
    );
  }
}
.checkboxes-placeholder {
  height: @Form-input-height;
  line-height: @Form-input-lineHeight;
  font-size: @Form-input-fontSize;
  padding: calc((@Form-input-height - @Form-input-lineHeight * @Form-input-fontSize) / 2) @gap-sm;
  color: @text--muted-color;
}
