@use '~@moda/tokens';

@mixin input-styles() {
  @include tokens.text(body1);

  //ios devices zoom in if inputs are smaller than 16px
  @include tokens.breakpoint(sm, $prop: max-width) {
    @include tokens.text(h6);
  }

  & {
    appearance: none;
    line-height: 1;
    width: 100%;
    padding: tokens.spacing(3, 4);
    border: 1px solid tokens.color(elephant);
    background-color: tokens.color('snow');
    border-radius: 0;
  }

  &::placeholder {
    line-height: normal;
  }

  &--focus,
  &:focus {
    outline: none;
    border-color: tokens.color(ink);
  }

  &--disabled,
  &:disabled {
    color: tokens.color(elephant);
    border-color: tokens.color(elephant);
    background-color: tokens.color(noise);
  }

  &--valid {
    border-color: tokens.color(money-good);
  }

  &--error {
    &,
    &:focus {
      border-color: tokens.color(code-red);
    }
  }
}