// Form elements

::-webkit-input-placeholder { /* WebKit browsers */
  color: $base-form-text-input-placeholder-color;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: $base-form-text-input-placeholder-color;
  opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: $base-form-text-input-placeholder-color;
  opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: $base-form-text-input-placeholder-color;
}

fieldset {
  background-color: $base-form-fieldset-background-color;
  border: $base-form-fieldset-border;
  margin: $base-form-fieldset-margin;
  padding: $base-form-fieldset-padding;
}

input,
label,
select {
  display: block;
  font-family: $base-form-font-family;
  font-size: $base-form-font-size;
}

label {
  color: $base-form-label-color;
  font-weight: $base-form-label-font-weight;
  line-height: 1;
  margin: $base-form-label-margin;

  &.required:after {
    content: '*';
  }

  abbr {
    display: none;
  }
}

#{$base-form-text-inputs},
#{$base-form-text-inputs-html5},
select[multiple=multiple],
textarea {
  background-color: $base-form-text-input-background-color;
  border: 1px solid $base-form-text-input-border-color;
  border-radius: $base-form-text-input-border-radius;
  box-shadow: $base-form-text-input-box-shadow;
  box-sizing: border-box;
  color: $base-form-text-input-color;
  font-family: $base-form-font-family;
  font-size: $base-form-font-size;
  margin: $base-form-text-input-margin;
  padding: $base-form-text-input-padding;
  transition: border-color 125ms ease-out;
  width: 100%;

  &:hover {
    border-color: $base-form-text-input-border-color-hover;
  }

  &:focus {
    border-color: $base-form-text-input-border-color-focus;
    outline: none;
  }
}

input[type='search'] {
  -moz-appearance: none;
  -webkit-appearance: none;
}

input[type='checkbox'],
input[type='radio'] {
  display: inline;
  margin: $base-form-choice-input-margin;
}

input[type='file'] {
  padding: $base-form-file-input-padding;
  width: 100%;
}

select {
  margin: $base-form-select-margin;
  max-width: 100%;
  width: auto;
}

textarea {
  resize: vertical;
}