How to make sort arrows in angular mat-table always visible?

I want to make sorting arrows from angular mat-table always visible (e.g. they have always opacity set to 0.54). How do I do that?

I've already tried adding css-code to my css-file for cthe component. It made all arrows visible (with opacity: 0.54), but in this case all arrows stay with this opacity always. Even if an arrow was clicked, it has the opacity set to 0.54, but it should have the opacity set to 1.

I tried it by adding this code into my css-file:

::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
  opacity: 0.54 !important;
}

I want that the arrows are always displayed with the Opacity 0.54. The remaining behavior of the arrows should remain unchanged. In the case where a column is unsorted, e.g. the arrow is in an undefined state, the arrow should be an up arrow and have the opacity: 0.54. If I click an arrow, it should have the opacity set to 1. If I cancel the sorting, the arrow should have the opacity: 0.54 again.

There is an example here: https://stackblitz.com/edit/angular-isxoc5. All arrows are displayed as I want. But if you click an arrow, it still have the opacity 0.54, not 1.