@import "../../scss/typo.mixins";
@import "../../scss/breakpoints.mixins";

@mixin text-field--focused() {
  color: $color-axa-blue;
  border-color: $color-axa-blue;
  outline: none;
}

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

@mixin text-field() {
  @extend %typo-18;

  width: 100%;
  height: 40px;
  padding: 0 20px;
  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
  color: $color-mineshaft;
  border: 1px solid $color-silver;
  // stylelint-disable-next-line
  -webkit-appearance: none;
  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */

  &::placeholder {
    color: $color-dusty-gray;
  }

  &.has-error {
    @include text-field--error();
  }

  &:focus {
    @include text-field--focused;
  }

  @include media-breakpoint-up(tablet) {
    height: 50px;
  }
}