How to disable cursor when hovering over angular component?

Question

I currently have a horizontal mat-stepper component which can be found below;

The user is currently able to go back to the previous step by clicking the "Back" button OR by clicking the header of each step. I would like to disable the ability to click on the step header to return to the previous step and make it so the only way the user is able to go back to the previous step is by clicking the 'Back' button.

Upon researching, I believe the solution is found in the CSS file, similar to this;

:host ::ng-deep .mat-vertical-stepper-header-container {
    pointer-events: none;
    cursor: not-allowed;
}

:host ::ng-deep .mat-vertical-stepper-header-container .mat-step-header:hover {
    background: inherit;
}

Answer 1

Solution found!

::ng-deep .mat-step-header{
    pointer-events: none !important;
}