@use '../helpers';
@use './with-inner-focus' as mixins;

@mixin as-text-field() {
  $border-width: 1px;

  @include helpers.font('300-regular');

  background-color: helpers.color('background-input');
  border: $border-width solid helpers.color('border-input');
  border-radius: helpers.border-radius('medium');
  box-sizing: border-box;
  color: helpers.color('content-main');
  opacity: 1;
  padding: helpers.space(1.5) - $border-width helpers.space(2) - $border-width;
  width: 100%;

  &::placeholder {
    color: helpers.color('content-placeholder');
    opacity: 1; // Firefox has reduced opacity
  }

  &:hover {
    border-color: helpers.color('border-input-hover');
  }

  // needs to be applied between [hover] and invalid states
  // stylelint-disable-next-line order/order
  @include mixins.with-inner-focus('action', $border-width);

  &.-invalid,
  &.-touched:invalid {
    @include mixins.with-inner-focus('negative', $border-width);

    border-color: helpers.color('border-negative');
    color: helpers.color('content-negative');
  }

  &:disabled {
    background-color: helpers.color('background-disabled');
    border-color: helpers.color('border-disabled');
    color: helpers.color('content-disabled');

    &::placeholder {
      color: inherit;
    }
  }
}