#{text-fields()} {
  @include font-style('body--m', 'body--l');
  appearance: none;
  background: $color--white;
  border: solid 1px $color--grey;
  border-radius: $border-radius;
  box-sizing: border-box;
  box-shadow: none;
  color: $color-brand--two;
  cursor: initial;
  font-family: $font-family-theme;
  margin: 0;
  min-height: 60px; // Internet Explorer fix
  padding: $text-field-spacing;
  text-overflow: ellipsis;
  width: 100%;

  &::placeholder {
    @include color-dark-shade-main;
    opacity: 1;
  }
  //IE fix
  &:-ms-input-placeholder {
    @include color-dark-shade-main;
    opacity: 1;
  }

  &::-ms-clear {
    display: none;
  }

  &:active,
  &:focus {
    @include transition(border-color, $transition-duration--fast);
    @include form-field--border-interaction-color;
    border-style: solid;
    border-width: 2px;
    outline: none;
    padding: $text-field-spacing-active;
  }
  // IE 11 Fix has same styling
  &:read-only:not(select):not(.flatpickr), /* excludes dropdown */
  &[disabled] {
    &,
    &:active,
    &:focus {
      @include color-dark-shade-alternative;
      background: $color--grey-10;
      border: 1px solid $color--grey;
      opacity: 1; /* required on iOS */
      outline: none;
      pointer-events: none;
    }
  }
  //IE fix
  &[disabled],
  &[readonly]:not(.flatpickr) {
    @include color-dark-shade-alternative;
    background: $color--grey-10;
    pointer-events: none;
  }

  // viewport l
  @include viewport--l {
    padding: $text-field-spacing--l;

    &:active,
    &:focus {
      padding: $text-field-spacing-active--l;
    }
  }
}

//parent targeting is not possible with the prefix
.form-group--error {
  #{text-fields()} {
    & {
      @include form-field--invalid;
    }
  }
}