// sass-lint:disable no-vendor-prefixes, no-css-comments

// Form defaults
//
// These are the default base styles applied to HTML form elements.
//
// Component classes can override these styles, but if no class applies a style
// to an HTML form element, these styles will be the ones displayed.

//
// The following rules are from normalize.css and help to fix inconsistencies
// across various browsers. You should probably leave these rules as is and jump
// to the "Buttons" rule on line 92 before you start editing this file.
//

button,
input,
optgroup,
select,
textarea {
  // Change the font styles in all browsers (opinionated).
  @include typeface(body);
  @include line-height(1);
  font-size: 100%;
  // Keep form elements constrained in their containers.
  box-sizing: border-box;
  max-width: 100%;
  // Remove the margin in Firefox and Safari.
  margin: 0;
}

// Show the overflow in IE.
button {
  overflow: visible;
}

// Remove the inheritance of text transform in Edge, Firefox, and IE.
button,
select {
  text-transform: none;
}

// Show the overflow in Edge.
input {
  overflow: visible;
}

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

[type='search'] {
  // Correct the odd appearance in Chrome and Safari.
  -webkit-appearance: textfield;
  // Correct the outline style in Safari.
  outline-offset: -2px;

  // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  &::-webkit-search-cancel-button,
  &::-webkit-search-decoration {
    -webkit-appearance: none;
  }
}

::-webkit-file-upload-button {
  // Correct the inability to style clickable types in iOS and Safari.
  -webkit-appearance: button;
  // Change font properties to `inherit` in Safari.
  font: inherit;
}

// Buttons
//
// Buttons built with the `<button>` element are the most flexible for styling
// purposes. But `<input>` elements with `type` set to `submit`, `image`,
// `reset`, or `button` are also supported.
//
// Below is the default button styling. To see variations on the button styling
// see the [button component](section-forms.html#kssref-forms-button).
//
// :hover        - Hover styling.
// :active:hover - Depressed button styling.

@import 'components/button/button';

// The %text-form-element can be used to style `<input>` text types and
// `<textarea>` elements at the same time.
%text-form-element {
  // Add your styles.
}

// Inputs
//
// The `<input>` element is mostly used for text-based inputs that include the
// HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
// `time`, `number`, `range`, `color`, and `file`.
//
// Note: Certain font size values applied to `number` inputs cause the cursor
// style of the decrement button to change from `default` to `text`.
//
// Note: The search input is not fully stylable by default. In Chrome and Safari
// on OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
// Chrome and Safari on Windows you can't control `border` properly. It will
// apply `border-width` but will only show a border color (which cannot be
// controlled) for the outer 1px of that border. Applying
// `-webkit-appearance: textfield` addresses these issues without removing the
// benefits of search inputs (e.g. showing past searches). Safari (but not
// Chrome) will clip the cancel button on when it has padding (and `textfield`
// appearance).

[type='text'],
[type='search'],
[type='tel'],
[type='url'],
[type='email'],
[type='password'],
[type='date'],
[type='time'],
[type='number'] {
  @extend %text-form-element !optional;
}

[type='range'] {
  // Add your styles.
}

[type='color'] {
  // Add your styles.
}

[type='file'] {
  // Add your styles.
}

// Checkboxes
//
// If an `<input>` element has the `type='checkbox'` attribute set, the form
// field is displayed as a checkbox.
//
// It is recommended that you do not style checkbox and radio inputs as
// Firefox's implementation does not respect box-sizing, padding, or width.

// Radio buttons
//
// If an `<input>` element has the `type='radio'` attribute set, the form field
// is displayed as a radio button.
//
// It is recommended that you do not style checkbox and radio inputs as
// Firefox's implementation does not respect box-sizing, padding, or width.

[type='checkbox'],
[type='radio'] {
  // Add the correct box sizing in IE 10-.
  box-sizing: border-box;
  // Remove the padding in IE 10-.
  padding: 0;
}

// Fieldsets
//
// The `<fieldset>` element groups a set of form fields, optionally under a
// common name given by the `<legend>` element.

fieldset {
  // Correct the padding in Firefox.
  @include padding(.35 .5 .65);
  border: 1px solid $border;
}

legend {
  // Correct the text wrapping in Edge and IE.
  box-sizing: border-box;
  display: table;
  max-width: 100%;
  // Align legend text with a fieldset's text while removing left padding so
  // people aren't caught out if they zero out fieldset padding.
  margin-left: -5px;
  padding: 0 5px;
  // Correct the color inheritance from `fieldset` elements in IE.
  color: inherit;
  white-space: normal;
}

// Labels
//
// The `<label>` element represents a caption of a form field. The label can be
// associated with a specific form control by using the `for` attribute or by
// putting the form control inside the label element itself.

label {
  // Drupal-style form labels.
  display: block;
  font-weight: bold;
}

// Select list
//
// The `<select>` element represents a form field for selecting amongst a set of
// options.
//
// Known limitation: by default, Chrome and Safari on OS X allow very limited
// styling of `<select>`, unless a `border` property is set. The default font
// weight on `optgroup` elements cannot safely be changed in Chrome on OSX and
// Safari on OS X.

select {
  // Add your styles.
}

// Progress
//
// The `<progress>` element represents the completion progress of a task.

progress {
  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
  vertical-align: baseline;
}

// Text areas
//
// The `<textarea>` element represents a multi-line plain text form field.

textarea {
  @extend %text-form-element !optional;
  // Remove the default vertical scrollbar in IE.
  overflow: auto;
}