// Form
// ––––––––––––––––––––––––––––––––––––––––––––––––––

// stylelint-disable selector-no-qualifying-type

form {
  margin-bottom: $form-margin-bottom;
}

input {
  &[type="date"],
  &[type="datetime"],
  &[type="datetime-local"],
  &[type="email"],
  &[type="month"],
  &[type="number"],
  &[type="password"],
  &[type="search"],
  &[type="tel"],
  &[type="text"],
  &[type="url"],
  &[type="week"] {
    @include input;
    @include input-size;
    @include input-width;
    @include input-focus;

    -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
  }

  &[type="date"],
  &[type="datetime"],
  &[type="datetime-local"],
  &[type="month"],
  &[type="week"] {
    height: $input-height;
    -webkit-appearance: listbox; // stylelint-disable-line property-no-vendor-prefix
  }

  // only set some simple margin as components will handle the style better
  &[type="checkbox"],
  &[type="radio"] {
    margin-right: 1rem;
  }
}

// Correct the cursor style of increment and decrement buttons in Chrome.
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

// stop date controls in webkit being taller
::-webkit-datetime-edit-fields-wrapper {
  margin: 0;
  padding: 0;
}

// placeholder text
::placeholder {
  color: $input-placeholder-color;
  opacity: 1;
}

textarea {
  @include input;
  @include input-size;
  @include input-width;
  @include input-focus;

  overflow: auto;
  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
}

select {
  @include input;
  @include input-size;
  @include input-width;
  @include input-focus;

  text-transform: none;

  &:not([multiple]) {
    height: $input-height;
  }
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: $label-font-weight;
}

legend {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  margin-bottom: 0.5rem;
  color: inherit;
  font-weight: $label-font-weight;
  white-space: normal;
}

fieldset {
  margin-bottom: $input-margin-bottom;
  border-width: 0;
}