how to change angular stepper progress color when next step active

i am trying to do a progression stepper as shown in this image

this is my code in css

.mat-step-header[aria-selected="true"] {
    background-color: #07C496;
}
.mat-step-header[ng-reflect-active='true']{
    background-color: #07C496;
 }

html :

<mat-horizontal-stepper #stepper labelPosition="bottom" linear >
    <ng-template matStepperIcon="edit" let-index="index"> {{index + 1}}
    </ng-template>
    <mat-step>
        <ng-template matStepLabel>test</ng-template>
        <div>
    </mat-step>
<mat-step>
        <ng-template matStepLabel>test</ng-template>
        <div>
    </mat-step>
<mat-step>
        <ng-template matStepLabel>test</ng-template>
        <div>
    </mat-step>
<mat-step>
        <ng-template matStepLabel>test</ng-template>
        <div>
    </mat-step>
</mat-horizontal-stepper>

this thing works in developement mode only and but doesn't work in prod mode cause ng-reflect-active doesnt exists in prod mode. can anyone help me to do this in css only pls.

You can simulate select all elements before behavior with the help of general sibling combinator (~) :

.mat-step-header {
    background-color: #07C496 !important;
}

.mat-step-header[aria-selected="true"] ~ * {
    background-color: transparent !important;
}

Stackblitz Example