@use "../../variables/media-query-breakpoints";
@use "../../variables/units";

.dso-justify-form-groups {
  display: flex;
  flex-direction: column;
  gap: units.$u2;

  .form-group {
    display: block;
    margin-block-end: 0;

    + .form-group,
    + .dso-form-buttons {
      margin-block-start: 0;
    }

    .dso-label-container {
      align-self: auto;
    }
  }

  @media (min-width: media-query-breakpoints.$screen-sm-min) {
    display: grid;
    gap: units.$u1;
    grid-template-rows: repeat(2, auto);

    @for $i from 1 through 3 {
      &.form-groups-#{$i} {
        grid-template-columns: repeat(#{$i}, 1fr) auto;
      }

      > div {
        &.dso-form-buttons {
          grid-column: #{$i + 1};
        }
      }
    }

    > div {
      &.dso-form-buttons {
        grid-row: 2;
        margin-block-end: 0;

        align-items: flex-start;
      }
    }

    .form-group {
      display: contents;

      &,
      + .form-group,
      + .dso-form-buttons {
        margin-block-end: 0;
        margin-block-start: 0;
      }

      .dso-label-container {
        align-self: end;
        grid-row: 1;
      }

      .dso-field-container {
        grid-row: 2;
        margin-block-start: 0;
      }

      .dso-info-container {
        grid-row: 3;

        .dso-help-block,
        .dso-message {
          margin-block-start: 0;
        }
      }
    }
  }
}