amis/scss/components/form/_text.scss

.#{$ns}TextControl {
  @include input-text();

  &-placeholder {
    color: $Form-input-placeholderColor;
    user-select: none;
    position: absolute;
    left: $Form-input-paddingX;
    top: $Form-input-paddingY;
    margin-top: 2 * $Form-input-borderWidth;
    line-height: $Form-input-lineHeight;
  }

  &-valueWrap {
    flex-grow: 1;
    line-height: 1;
    white-space: nowrap;

    > input {
      display: inline-block;
      width: auto;
      vertical-align: middle;
    }
  }

  &--withAddOn {
    display: flex;
    flex-wrap: nowrap;

    @include media-breakpoint-up(sm) {
      &.#{$ns}Form-control--sizeXs,
      &.#{$ns}Form-control--sizeSm,
      &.#{$ns}Form-control--sizeMd,
      &.#{$ns}Form-control--sizeLg {
        display: inline-flex;

        > .#{$ns}TextControl-input {
          min-width: unset;
        }
      }
    }
  }

  &--withAddOn > &-input {
    flex-basis: 1;
    flex-grow: 1;
    width: 0;

    border-radius: 0;

    &:first-child {
      border-top-left-radius: $Form-input-borderRadius;
      border-bottom-left-radius: $Form-input-borderRadius;
    }

    &:last-child {
      border-top-right-radius: $Form-input-borderRadius;
      border-bottom-right-radius: $Form-input-borderRadius;
    }

    @if $Form-input-addOnDividerBorderWidth==0 {
      &:not(:last-child) {
        border-right-width: 0;
      }
    }
  }

  &--withAddOn > &-addOn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: px2rem(10px);
    padding-right: px2rem(10px);
    background: $Form-input-addOnBg;
    color: $Form-input-addOnColor;
    border-color: $Form-input-borderColor;
    border-style: solid;
    border-width: px2rem(1px) 0;

    &:first-child {
      border-left-width: px2rem(1px);
    }

    &:last-child {
      border-right-width: px2rem(1px);
      border-top-right-radius: $Form-input-borderRadius;
      border-bottom-right-radius: $Form-input-borderRadius;
    }
  }

  &--withAddOn > &-button {
    > .#{$ns}Button {
      position: relative;
      border-radius: 0;
      margin-left: px2rem(-1px);
      border: $InputGroup-button-borderWidth solid
        $InputGroup-button-borderColor;
    }

    &:not(:last-child) .#{$ns}Button {
      border-right: 0;
    }

    &:first-child .#{$ns}Button {
      @if $InputGroup-button-borderRadius {
        border-top-left-radius: $InputGroup-button-borderRadius;
        border-bottom-left-radius: $InputGroup-button-borderRadius;
      }
    }

    &:last-child .#{$ns}Button {
      @if $InputGroup-button-borderRadius {
        border-top-right-radius: $InputGroup-button-borderRadius;
        border-bottom-right-radius: $InputGroup-button-borderRadius;
      }
    }
  }

  &--withAddOn.is-focused > &-button .#{$ns}Button {
    border-color: $Form-input-onFocused-borderColor;
  }

  &--withAddOn.is-error > &-addOn {
    border-color: $Form-input-onError-borderColor;
  }

  &--withAddOn.is-focused > &-addOn {
    border-color: $Form-input-onFocused-borderColor;
    color: $Form-input-onFocus-addOnColor;
    box-shadow: $Form-input-boxShadow;
  }

  &--withAddOn.is-disabled > &-addOn {
    color: $text--muted-color;
  }

  &-input--withAC {
    position: relative;
    flex-wrap: wrap;

    input {
      width: auto;
      color: $Form-input-placeholderColor;
    }
  }

  &-sugs {
    position: absolute;
    background: $Form-select-menu-bg;
    color: $Form-select-menu-color;
    border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
    left: px2rem(-1px);
    right: px2rem(-1px);
    top: 100%;
    z-index: 10;
  }

  &-sugItem {
    padding: (
        $Form-selectOption-height - $Form-input-lineHeight *
          $Form-input-fontSize - px2rem(2px)
      )/2 px2rem(12px);

    svg {
      width: px2rem(16px);
      margin-top: px2rem(4px);
      float: right;
      fill: darken($color: $Form-input-iconColor, $amount: 20%);
    }

    &:not(.is-disabled) {
      cursor: pointer;
    }

    &.is-highlight {
      color: $Form-select-menu-onHover-color;
      background: $Form-select-menu-onHover-bg;
    }
  }

  &-value {
    user-select: none;
    line-height: $Form-input-lineHeight * $Form-input-fontSize;
    vertical-align: middle;
    display: inline-block;
  }

  &-input--multiple {
    height: auto;
    min-height: $Form-input-height;
  }

  &-input--multiple &-valueWrap {
    white-space: normal;

    margin-bottom: -$gap-xs;

    > input {
      margin-bottom: $gap-xs;
    }
  }

  &-input--multiple &-value {
    line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
    font-size: $Form-selectValue-fontSize;
    color: $Form-selectValue-color;
    background: $Form-selectValue-bg;
    border: px2rem(1px) solid $Form-selectValue-borderColor;
    border-radius: px2rem(2px);
    margin-right: $gap-xs;
    margin-bottom: $gap-xs;
  }

  &-valueIcon {
    cursor: pointer;
    border-right: px2rem(1px) solid $Form-selectValue-borderColor;
    padding: 1px 5px;

    &:hover {
      background-color: darken($Form-selectValue-bg, 5%);
    }
  }

  &-input--multiple &-valueLabel {
    padding: 0 $gap-xs;
  }
}