form {
  margin: 0 0 var(--_);
}

fieldset {
  @include after_border();

  border: 0;
  padding: var(--_) var(--fieldset_padding_h);
  margin: 0 0 var(--_);

  &::after {
    top: calc(-1 * var(--_));
    z-index: -1;
  }

  > :last-child {
    margin-bottom: 0;
  }
}

legend {
  background-color: var(--body_background_color);
  padding: var(--legend_padding_h);
}

#{$all-text-inputs},
select {
  background-color: var(--input_background_color);
  border: var(--input_border_width) var(--input_border_style) var(--input_border_color);
  border-radius: var(--input_border_radius);
  color: var(--input_color);
  height: var(--input_height);

  &:hover {
    background-color: var(--input_background_color_hover);
    border-color: var(--input_border_color_hover);
    color: var(--input_color_hover);
  }

  &:focus {
    @include outline();

    background-color: var(--input_background_color_focus);
    border-color: var(--input_border_color_focus);
    color: var(--input_color_focus);
  }

  &:active {
    background-color: var(--input_background_color_active);
    border-color: var(--input_border_color_active);
    color: var(--input_color_active);
  }

  &:disabled {
    background-color: var(--input_background_color_disabled);
    border-color: var(--input_border_color_disabled);
    color: var(--input_color_disabled);
    pointer-events: none;
  }

  &:read-only {
    background-color: var(--input_background_color_read_only);
    border-color: var(--input_border_color_read_only);
    color: var(--input_color_read_only);
  }
}

#{$all-text-inputs} {
  padding: var(--input_padding);
}

input[type='checkbox'],
input[type='radio'],
input[type='range'] {
  &:focus {
    @include outline();
  }
}

input[type='checkbox'],
input[type='radio'] {
  vertical-align: baseline;
}

input[type='range'] {
  vertical-align: text-top;
}

textarea {
  height: auto;
  padding: calc(var(--_half_ceil) - var(--input_border_width)) var(--textarea_padding_h) calc(var(--_half_floor) - var(--input_border_width));
}