/* Labels */
label {
  display: inline-block;
  color: var(--wa-form-control-label-color);
  font-weight: var(--wa-form-control-label-font-weight);
  line-height: var(--wa-form-control-label-line-height);
  position: relative;

  &:has(
      input:not(
          [type='button'],
          [type='checkbox'],
          [type='color'],
          [type='file'],
          [type='hidden'],
          [type='image'],
          [type='radio'],
          [type='range'],
          [type='reset'],
          [type='submit']
        ),
      textarea,
      select
    ) {
    width: 100%;
  }

  & + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
  & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
    margin-block-start: var(--wa-space-xs);
  }
}

/* Fieldsets */
fieldset {
  border: solid 1px var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
  padding-block-end: var(--wa-space-xl);
}

legend {
  padding: 0;
  padding-inline: var(--wa-space-2xs);
}

/* Native form controls */
button,
input,
select,
textarea {
  font: inherit;
}
