.input {
  $block: #{&};

  &--variation--default {
    #{$block}__input {
      max-inline-size: auto;
      block-size: auto;
      padding: 0 $whitespace-2;
    }
  }

  &__body {
    @include flex(column, nowrap, $whitespace-5);
  }

  &__label {
    font-weight: $font-weight-semi-bold;
  }

  &--error {
    #{$block}__input {
      border-color: $color-status-error;
    }

    #{$block}__input::placeholder,
    #{$block}__label-icon {
      color: $color-status-error;
    }
  }

  &__input::placeholder,
  &__label-icon {
    color: $color-neutral-7;
  }

  &__input {
    @include remove-input-styles;
    @include flex(row, nowrap, $whitespace-3, center);

    max-inline-size: 40rem;
    block-size: 3.5rem;
    padding: $whitespace-4 $whitespace-5;
    border: 0.1rem solid $color-neutral-10;

    &::placeholder {
      font-size: $font-size-3;
    }
  }

  &__label-icon {
    inline-size: 2rem;
  }

  &__error-message {
    max-inline-size: 26rem;
    margin-block-start: $whitespace-5;
    font-size: $font-size-3;
    font-weight: $font-weight-semi-bold;
    color: $color-status-error;
  }
}