.TextInput {
  @extend .Font__body--10;
  @extend .Font__color--text;
  @extend %default-border-background;
  height: 36px;
  padding: 3px 12px 0;
  border-radius: 4px;

  &:focus {
    @extend %focus-border-background;
  }

  &::placeholder {
    color: $color-gray-60;
  }

  &--has-icon-left {
    padding-left: 36px;
  }

  &--has-icon-right {
    padding-right: 36px;
  }

  &--full-width {
    width: 100%;
  }

  &--warning {
    @extend %warning-border-background;
  }

  &--success {
    @extend %success-border-background;
  }

  &--round {
    border-radius: 18px;
  }

  &:disabled {
    @extend %disabled-border-background;

    &:hover {
      cursor: not-allowed;
      resize: none;
    }
    &::placeholder {
      color: $color-gray-80;
    }
  }

  &--textselect {
    border-radius: 4px 0 0 4px;
    border-right: none;

    &:disabled {
      border-right: none;
    }
  }
}