bug(mat-form-field): suffix element style should reflect input disabled state

### Reproduction

[Open this StackBlitz](https://stackblitz.com/edit/components-issue-8gvvrn?file=src/app/example-component.html) and toggle the Disabled state with the checkbox.

### Expected Behavior

Per [the Text Field spec](https://material.io/components/text-fields#outlined-text-field), under "Outlined text field with suffix text", a suffix in a disabled text field should use the same font (weight / color / opacity) as the wrapped input element.


(In the image from the spec, "55" is the input text and "/100" is the suffix.)

### Actual Behavior

The input text is light gray, to indicate that the input is disabled, but the suffix styling does not change, so it doesn't match the input text.

### Environment

- Angular: 11.1
- CDK/Material: 11.1
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

### Note

I also see that in all the suffix examples where the input is *not* disabled, the suffix is styled slightly lighter than the input text. As you can see in the StackBlitz, the default suffix is exactly the same as the input text. The spec doesn't explicitly require this, as far as I can see, so maybe it's just a suggestion?

Sử dụng bản tái hiện StackBlitz được liên kết, bắt đầu với src/app/example-component.html, và chuyển đổi checkbox để so sánh input bị vô hiệu hóa với suffix. Theo dõi kiểu dáng của suffix trong mat-form-field và xác minh rằng suffix khớp với độ đậm phông chữ, màu sắc và độ mờ của input bị vô hiệu hóa, đồng thời vẫn giữ nguyên hành vi khi không bị vô hiệu hóa.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.