/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/hyphenation" as *;
@use "../../common/resets" as *;
@use "../../common/text-rendering" as *;

.ams-field-set {
  @include reset-fieldset;

  break-inside: avoid;
}

// Default margin between all direct children of Field Set
// We can’t use grid or flex display and a gap because of a bug in Chrome.
.ams-field-set > :not(:last-child) {
  margin-block-end: var(--ams-field-set-child-margin-block-end);
}

/* stylelint-disable plugin/use-baseline -- Without support for `:has`, all elements have the same spacing, which is acceptable. */

// We use :has here to increase the margin before the error message.
.ams-field-set > :has(+ .ams-error-message) {
  margin-block-end: var(--ams-field-set-child-before-error-message-margin-block-end);
}

// If a Field Set contains a Field or another Field Set, increase the margin of the preceding element.
.ams-field-set > :has(+ .ams-field),
.ams-field-set > :has(+ .ams-field-set) {
  margin-block-end: var(--ams-field-set-child-before-field-or-field-set-margin-block-end);
}

// If a Field Set contains multiple Fields or Field Sets, increase the margin between them.
.ams-field-set > :is(.ams-field, .ams-field-set):has(+ :is(.ams-field, .ams-field-set)) {
  margin-block-end: var(--ams-field-set-child-between-fields-and-field-sets-margin-block-end);
}

/* stylelint-enable plugin/use-baseline */

.ams-field-set--invalid {
  border-inline-start: var(--ams-field-set-invalid-border-inline-start);
  padding-inline-start: var(--ams-field-set-invalid-padding-inline-start);
}

.ams-field-set__legend {
  @include reset-legend;

  color: var(--ams-field-set-legend-color);
  font-family: var(--ams-field-set-legend-font-family);
  font-size: var(--ams-field-set-legend-font-size);
  font-weight: var(--ams-field-set-legend-font-weight);
  line-height: var(--ams-field-set-legend-line-height);

  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
  text-wrap: var(--ams-field-set-legend-text-wrap);

  @include hyphenation;
  @include text-rendering;
}

.ams-field-set__legend--in-fieldset {
  font-weight: var(--ams-field-set-legend-in-fieldset-font-weight);
}

.ams-field-set__heading {
  font-size: inherit;
  font-weight: inherit;
  margin-block: 0;
}