How to remove ripple effect from mat-stepper

Question

tihs is the effect when you hover you mose over matstepper not able to figure how to disable this effect want to remove ripple effect or focus effect or scrollable affect from mat-stepper please help me out here
i have tried all the methods not able to figure it out like ripple effect transparent and on-focus indicator

.stepper-qre {
        background: #F5F6F7;
        height: 88%;
    }
    
    .mat-horizontal-stepper-header-container {
        width: 65% !important;
        margin-left: 16.5%;
        /* display: -webkit-box !important; */
    }
    
    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
        padding: 24px 0px !important;
    }
    
    ::ng-deep.mat-stepper-label-position-bottom.mat-stepper-horizontal-line {
        top: 34px !important;
    }
    
    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header .mat-step-label {
        position: fixed;
        margin-top: 1%;
    }
    
    .stepper-qre.mat-step-icon-selected {
        background-color: #2699FB !important;
        color: white !important;
    }
    
    .stepper-qre.mat-step-icon-state-done {
        background-color: #2699FB !important;
        color: #fff !important;
    }
    
    .stepper-qre.mat-step-header .mat-step-icon {
        background-color: #C4C6CC !important;
        color: #fff;
    }
    
    ::ng-deep.mat-step-icon {
        height: 20px !important;
        width: 20px !important;
    }
    
    .mat-step-icon.mat-step-icon-state-notcompleted {
        background-color: #C4C6CC !important;
    }
    
    #activebutton:focus {
        border: none !important;
        outline: none !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    ::ng-deep.mat-step-header.mat-step-header-ripple {
        background-color: transparent !important;
    }
    
    .mat-ripple-element {
        transition-duration: 0ms !important;
    }

Answer 1

.mat-step-header:hover{
    background-color: white !important;
}
.mat-step-header.cdk-program-focused {
      background-color: white;
  }
.mat-step-header.cdk-mouse-focused{
    background-color: white;
}
.mat-step-header.cdk-focused{
    background-color: white;
}

Answer 2

There's a disableRipple property available for the stepper component, as per the API.

Modified the official stackblitz example to demonstrate.

Answer 3

Just set the disableRipple to true:

<mat-stepper [disableRipple]="true" #stepper></mat-stepper>