.new-order-form {
  $block: #{&};

  @include flex(column, nowrap, $whitespace-10);

  inline-size: 100%;
  padding: $whitespace-10;
  background-color: $color-neutral-2;

  &__header {
    @include flex(row, nowrap, null, null, space-between);
  }

  &__header-left {
    @include flex(row, nowrap, $whitespace-7, center);
  }

  &__heading {
    font-size: $font-size-7;
    font-weight: $font-weight-bold;
  }

  &__form {
    @include grid(null, 1fr 1fr, $whitespace-9);

    // @include flex(column, nowrap, $whitespace-9);
  }

  &__section {
    @include flex(column, nowrap, $whitespace-8);

    inline-size: 100%;

    // max-inline-size: 60rem;
    min-inline-size: 0;
    padding: $whitespace-7;
    background-color: $color-neutral-1;
    border: 0.1rem solid $color-neutral-5;

    &:nth-child(1) {
      grid-column: 1 / 2;
    }

    &:nth-child(3) {
      grid-column: span 2;
    }
  }

  &__section-heading {
    font-size: $font-size-6;
    font-weight: $font-weight-semi-bold;
  }

  &__section-body {
    @include flex(column, nowrap, $whitespace-8);
  }

  &__row {
    @include flex(row, nowrap, $whitespace-6);
  }

  &__input-group {
    @include flex(row, nowrap, $whitespace-5);
  }

  &__input,
  &__select {
    flex: 1;
    min-inline-size: 0;
  }

  &__input-wrapper {
    @include flex(column, nowrap, $whitespace-4);
  }

  &__add-button {
    align-self: flex-start;
  }

  &__error-message {
    color: $color-status-error;
  }
}