@use '../function' as *;
@use '../mixin' as *;
@use '../config' as *;

@mixin generate-form-group {
  .form-group {
    @include generate-variables($form-group);

    display: flex;
    flex-direction: column;
    gap: config('gap', $form-group);

    &--horizontal-check {
      @include generate-variables($form-group-check);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: config('gap', $form-group-check);
    }

    &--vertical-check {
      @include generate-variables($form-group-check);
      align-items: start;
      flex-direction: column;
      gap: config('gap', $form-group-check);
    }

    &--row {
      @include generate-variables($form-group-row);

      align-items: config('vertical-alignment', $form-group-row);
      display: grid;
      gap: config('gap', $form-group-row);
      grid-template-columns: minmax(0, 1fr);

      &\:vertical-center {
        align-items: center;
      }

      &\:vertical-start {
        align-items: flex-start;
      }

      @container form-group-container (inline-size > #{config('container-inline-size', $form-group-row, false)}) {
        grid-template-columns: minmax(0, #{config('label-inline-size', $form-group-row)}) minmax(0, 1fr);
      }

      .form-description,
      .field-feedback {
        @container form-group-container (inline-size > #{config('container-inline-size', $form-group-row, false)}) {
          grid-column-start: 2;
        }
      }
    }

    &--stacked {
      display: flex;

      > * {
        + * {
          border-radius: 0;
          margin-inline-start: -1px;
        }

        // stylelint-disable
        &:first-child {
          border-start-end-radius: 0;
          border-start-start-radius: config('border-radius', $form-control);
          border-end-end-radius: 0;
          border-end-start-radius: config('border-radius', $form-control);
        }

        &:last-child {
          border-start-end-radius: config('border-radius', $form-control);
          border-start-start-radius: 0;
          border-end-end-radius: config('border-radius', $form-control);
          border-end-start-radius: 0;
        }

        &:only-child {
          border-radius: config('border-radius', $form-control);
        }
        // stylelint-enable

        &:focus {
          z-index: 2;
        }
      }
    }

    &-container {
      container: form-group-container / inline-size;
    }
  }
}