@define-mixin input-field {
  border: var(--input-field-border);
  border-radius: var(--input-field-border-radius);
  color: var(--input-field-font-color);
  height: var(--input-field-height);
  font-size: var(--input-field-font-size);
  line-height: var(--input-field-line-height);
  padding: var(--input-field-padding);
  width: 100%;

  /*
    address iOS safari lightening the disabled input type color
    http://stackoverflow.com/questions/262158/disabled-input-text-color#answer-4648315
  */
  &[disabled] {
    background-color: var(--input-field-disabled-background-color);
    -webkit-text-fill-color: var(--input-field-disabled-font-color);
  }

}