.tao-form .text-field {
  position: relative;

  .prefix, .suffix {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: $form-field-height;
    height: $form-field-height;
    font-size: $form-field-font-size;
    color: $lighter-grey-color;
    fill: $lighter-grey-color;
  }

  .prefix {
    top: 0;
    left: 0;
  }

  .suffix {
    top: 0;
    right: 0;
  }

  &.text-field-with-prefix .input-field {
    padding-left: $form-field-line-height + $form-field-padding-v * 2;
  }

  &.text-field-with-suffix .input-field {
    padding-left: $form-field-line-height + $form-field-padding-v * 2;
  }
}