_forms.scss

@use "../abstracts/" as *;

// 01 formbody
// vertical rhythm between the form widgets - the first two children of .formbody are "hidden" fields, so the first visible widget (which is the third child) gets a margin-top applied which has to be removed
.formbody {
  width: min(100%, 40rem);
  padding: $formbody-padding;
  background-color: $formbody-background-color;
  // vertical rhythm
  > *:where(:not(:nth-child(3))) {
    margin-block-start: $form-space;
  }
}
//--------------------------

// 02 input, select, textarea + label
label {
  display: block;
  margin-block-end: 0.375rem;
  font-family: $form-label-font-family;
  font-weight: $form-label-font-weight;
  font-size: $form-label-font-size;
  color: $form-label-color;
}
// if it should match the formbody-legend:
label.select {
  font-family: $form-legend-font-family;
  font-weight: $form-legend-font-weight;
  font-size: $form-legend-font-size;
  color: $form-legend-color;
}
input,
textarea,
select {
  padding-block: $form-input-padding-block;
  padding-inline: $form-input-padding-inline;
  background-color: $form-input-background-color;
  border: $form-input-border-default;
  border-radius: $form-input-border-radius;
  font-family: $form-input-font-family;
  font-weight: $form-input-font-weight;
  font-size: $form-input-font-size;
  color: $form-input-color;
}
input.text,
textarea {
  width: 100%;
  margin: 0;
}
// in einem widget-wrapper soll das select-feld 100% breit sein
.widget-wrapper select {
  width: 100%;
}
[placeholder="placeholder"] {
  font-family: $form-placeholder-font-family;
  font-weight: $form-placeholder-font-weight;
  font-size: $form-placeholder-font-size;
  color: $form-placeholder-color;
}
//--------------------------

// 03 fieldset + legend
fieldset {
  // basic styling - remove browser styles
  margin: unset;
  padding: unset;
  border: none;
  &.styled,
  &.styled fieldset {
    padding: $form-fieldset-styled-padding;
    border: $form-fieldset-styled-border;
    border-radius: $form-fieldset-styled-border-radius;
  }
  legend {
    margin-block-end: 0.5rem;
    padding-inline: $form-fieldset-legend-padding;
    font-family: $form-legend-font-family;
    font-weight: $form-legend-font-weight;
    font-size: $form-legend-font-size;
    color: $form-legend-color;
    line-height: 1.1;
  }
  // vertical rhythm between fieldsets and checkboxes/radio-buttons
  > *:not(:first-of-type) {
    margin-block-start: var(--paragraph-space, $paragraph-space);
  }
}
//--------------------------

// 04 spam-protection (normally hidden)
.widget-captcha {
  label {
    color: $color-alert;
  }
  span.captcha_text {
    display: block;
    margin-top: 0.5em;
  }
}
//--------------------------

// 05 submit-button
button.submit {
  // _buttons.scss
}
//--------------------------

// EXTENDED STYLING

// Abstände im widget-explanation
.widget-explanation {
  > *:where(:not(:first-child)) {
    margin-top: var(--paragraph-space, $paragraph-space);
  }
}

// mehrere widgets pro Zeile
.widget-wrapper {
  @media (width > $tweakpoint-30) {
    display: flex;
    justify-content: space-between;
    gap: 5%;
    > * {
      width: 100%;  // distribute the flex-items evenly
    }
  }
  @media (width < calc($tweakpoint-30 - 0.0625em)) {
    > * + * {
      margin-top: 2rem;
    }
  }
}
//--------------------------

// align checkboxes and radio buttons horizontally with their Label
input[type="checkbox"],
input[type="radio"] {
  + label {
    display: inline;
  }
}
// FIXME
// when the label has more lines, the second line should not run under the input
// .checkbox_container,
// .radio_container {

// }
//--------------------------

// align radio buttons and checkboxes vertically with their legend
// except for * mandatory which should be inline with the label
// except for single checkboxes
.formbody span:not(.mandatory){
  display: block;
}
.checkbox-single span {
  display: inline;
}
//--------------------------

// align checkbox with more text
// .content-text from {{insert_content::xx}}, class .checkbox-mandatory-agb
.checkbox-mandatory-agb span:not(.mandatory) {
  // reset margin-block-start
  margin-block-start: -0.0625em;
  display: flex;
  align-items: flex-start;
  input {
    margin-block-start: 0.375em;
    margin-right: 0.5rem;
  }
  label {
    margin-block-end: unset;
  }
  .content-text {
    margin-block-end: unset;
  }
}
//--------------------------

// Bestätigung nach Ajax-Versand
.form-confirmation {
  width: fit-content;
  padding: 1.5rem;
  background-color: $color-neutral-100;
  border-inline-start: 3px solid $color-primary-400;
  h3 {
    margin-block-end: 0.75em;
  }
  p:not(:last-of-type) {
    margin-block-end: $paragraph-space;
  }
}
//--------------------------
Check

.form-confirmation bei Blumenbeete
.formbody width bei Plan B
background-color bei ISP