@mixin text-field-style {
  width: $form-field-width;
  padding: $form-field-padding-v $form-field-padding-h;
  background: $white-color;
  border: 1px solid $border-color;
  border-radius: $border-radius-s;
  font-size: $form-field-font-size;
  color: $form-field-text-color;
  line-height: $form-field-line-height;
  transition: border-color 300ms;
  outline: none;

  &:hover,
  &:focus {
    border-color: $form-field-active-border-color;
  }

  &[readonly] {
    color: $light-grey-color;
  }

  &[disabled] {
    cursor: not-allowed;
    background: $grey-bg-color;
    border-color: $light-border-color;
    color: $lightest-grey-color;
  }
}