@mixin field-base {
  @include normal-text;
  background: $white;
  border: 1px solid $gray;
  border-radius: 3px;
  color: $gray-dark;
  padding: 8px 16px;
  outline: none;
  height: 40px;
  width: 100%;

  // To avoid inputs auto zoom on devices, font-size is set to 1rem (not less than 16px)
  .touch-device & {
    font-size: 1rem;
    line-height: 1.4rem;
  }
}

@mixin field-hover {
  border-color: $blue;
}

@mixin field-disabled {
  background-color: $gray-light;
  border-color: $gray;
  color: $gray-dark;
  -webkit-text-fill-color: $gray-dark;
  opacity: 1;
}

@mixin field-error {
  border-color: $red;
}

@mixin inputfield {
  @include field-base;

  &:focus {
    @include field-hover;
  }

  &:disabled {
    @include field-disabled;
  }

  &::placeholder {
    color: $warm-grey;
    opacity: 1;
  }

  &:-ms-input-placeholder {
    color: $warm-grey;
    opacity: 1;
  }
}
