/**
 * Form group
 */

@use 'sass:map';
@use '@ecl/vanilla-utility-screen-reader/screen-reader';

// Exposed variables
$theme: null !default;
$form-group: null !default;

.ecl-form-group {
  border-width: 0;
  box-sizing: border-box;
  display: block;
  margin: 0;
  padding: 0;
}

.ecl-feedback-message {
  align-items: center;
  box-sizing: border-box;
  color: map.get($form-group, 'color-invalid');
  display: flex;
  font: map.get($form-group, 'font-invalid');
  margin-top: var(--s-xs);
  max-width: var(--max-w);
  padding: 0;
}

.ecl-feedback-message__icon {
  margin-inline-end: map.get($form-group, 'margin-icon');
}

.ecl-help-block {
  box-sizing: border-box;
  color: map.get($form-group, 'color-help');
  display: block;
  font: map.get($form-group, 'font-help');
  margin: var(--s-2xs) 0 var(--s-xs);
  max-width: var(--max-w);
  padding: 0;
}

.ecl-form-label {
  box-sizing: border-box;
  color: map.get($form-group, 'color-label');
  display: block;
  font: map.get($form-group, 'font-label');
  margin: 0;
  max-width: var(--max-w);
  padding: 0;
  white-space: pre-wrap;
}

.ecl-form-label__optional,
.ecl-form-label__required {
  vertical-align: text-bottom;
  font: var(--f-s);
  margin-inline-start: var(--s-2xs);
}

.ecl-form-label__optional {
  color: var(--c-p);
}

.ecl-form-label__required {
  color: var(--c-er);
}

.ecl-form-label--hidden {
  @include screen-reader.sr-only;
}

.ecl-form-label.ecl-form-label--hidden + * {
  margin-top: 0;
}

.ecl-form-label:not(.ecl-form-label--hidden)
  + *:not(.ecl-help-block, .ecl-feedback-message) {
  margin-top: var(--s-xs);
}
