@use "sass:math";

@use "../../variables/units";
@use "../../variables/colors";
@use "../../variables/media-query-breakpoints";
@use "../../variables/typography";
@use "../../variables/zindex";
@use "../form-control";
@use "../heading";

@use "../../di";

@use "../grid";

@use "form-group.variables" as form-group-variables;

@use "checkboxes/form-group-checkboxes";
@use "confirm/form-group-confirm";
@use "files/form-group-files";
@use "input/form-group-input";
@use "radios/form-group-radios";
@use "search-bar/form-group-search-bar";
@use "select/form-group-select";
@use "static/form-group-static";
@use "textarea/form-group-textarea";

.form-group {
  margin-block-end: var(--_dso-form-group-margin-block-end, form-group-variables.$form-group-margin-bottom);

  + .form-group:not(.dso-static),
  + .dso-form-buttons {
    margin-block-start: form-group-variables.$form-group-margin;
  }

  &:not(.dso-static) + .form-group.dso-static,
  &.dso-static + .form-group:not(.dso-static) {
    margin-block-start: form-group-variables.$form-group-margin * 0.5;
  }

  &.dso-edit + .form-group {
    margin-block-start: 0;
  }

  + dl,
  + table,
  + ol,
  + ul,
  + div:not(.form-group):not(.dso-form-buttons) {
    margin-block-start: units.$block-spacing-xlarge;
  }

  > .dso-info {
    float: inline-start;
    margin-block: units.$u2;
    margin-inline: 0;
  }

  .dso-info {
    h5,
    .h5 {
      @include heading.no-margin();
    }
  }

  .control-label {
    display: inline;
    font-weight: bold;
    margin-block-end: units.$u1;
    max-inline-size: 100%;
    text-align: start;
  }

  .dso-rich-content:has(table) {
    overflow-x: auto; // facilitate table overflow if needed
  }

  legend + .dso-label-container {
    margin-block-end: units.$u1;
  }

  .dso-label-container + .dso-field-container {
    margin-block-start: units.$u1;
  }

  &.has-feedback {
    // Enable absolute positioning
    position: relative;

    // Reposition feedback icon if input has visible label above
    label {
      & ~ .form-control-feedback {
        inset-block-start: (typography.$line-height-computed + 5); // Height of the `label` and its margin
      }

      &.sr-only ~ .form-control-feedback {
        inset-block-start: 0;
      }
    }

    .form-control {
      padding-inline-end: units.$u6 - form-control.$border-width; // Feedback icon: 16px padding + 16px size + 16px padding - border
    }

    .form-control-feedback {
      color: colors.$bosgroen;
      display: block;
      block-size: form-group-variables.$input-height-base;
      line-height: form-group-variables.$input-height-base;
      pointer-events: none;
      position: absolute;
      inset-inline-end: 0;
      text-align: center;
      inset-block-start: 0;
      inline-size: units.$u6;
      z-index: zindex.$form-control-feedback; // Ensure icon is above input groups

      dso-icon {
        margin-block-start: #{units.$u1 - 1};
      }
    }
  }

  &.dso-invalid {
    .form-control {
      border-color: form-group-variables.$field-invalid-border-color;

      &:focus {
        box-shadow: inset 0 0 0 form-control.$focus-border-width form-group-variables.$field-invalid-border-color;
      }
    }

    .dso-message {
      color: form-group-variables.$field-invalid-message-color;
      padding-inline-start: units.$u4;
      position: relative;

      &::before {
        @include di.base("status-error", form-group-variables.$field-invalid-icon-size);

        content: "";
        display: block;
        inset-inline-start: 0;
        position: absolute;
      }
    }
  }

  .dso-message,
  .dso-help-block {
    margin-block: units.$u1 0;
    margin-inline: 0;
  }

  .dso-help-block {
    color: colors.$grijs-60;
    font-style: italic;
  }
}

.form-horizontal .form-group {
  // Make form groups behave like rows
  @include grid.make-row();

  > .dso-label-container {
    @include grid.make-sm-column(form-group-variables.$label-column);

    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {
      padding-block-start: units.$u1;
    }

    > button.dso-info-button {
      margin-block-start: 0;
    }

    > .dso-info {
      margin-block-start: units.$u1;
    }
  }

  > legend + .dso-label-container {
    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {
      padding-block-start: units.$u1;
    }
  }

  > .dso-field-container {
    @include grid.make-sm-column(grid.$grid-columns - form-group-variables.$label-column);

    @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {
      margin-block-start: 0;
    }
  }

  &.has-feedback .form-control-feedback {
    inset-inline-end: math.floor((grid.$grid-gutter-width * 0.5));
  }

  > .dso-info {
    margin: units.$u2;
    inline-size: calc(100% - #{units.$u4});
  }
}

// to do: integrate this into spacing.scss [#2217]
.dso-img-list + .form-group {
  margin-block-start: units.$block-spacing-xlarge;
}

#{form-group-variables.$form-selectors} {
  .dso-field-container {
    position: relative;
  }

  fieldset {
    .dso-label-container {
      > .dso-info {
        font-weight: 400;
        margin-block-end: units.$u2;
        margin-block-start: units.$u1;
      }
    }
  }
}