.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 {
    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 {
    color: $color-status-error;
  }
}