Angular Material apply classes on mat-horizontal-stepper

Running Angular 11

I have two separate components, each of which contains a material horizontal stepper. I want to use a class to control the color of the selected and unselected stepper options. I can set styles that apply to all steppers, but cannot figure out how to apply a class.

Component 1:

<mat-horizontal-stepper class="greenStepper">
     <mat-step><ng-template matStepLabel>1</ng-template>stuff</mat-step>
     <mat-step><ng-template matStepLabel>2</ng-template>stuff</mat-step>
     <mat-step><ng-template matStepLabel>3</ng-template>stuff</mat-step>
</mat-horizontal-stepper>

Component 2:

<mat-horizontal-stepper class="blueStepper">
     <mat-step><ng-template matStepLabel>A</ng-template>stuff</mat-step>
     <mat-step><ng-template matStepLabel>B</ng-template>stuff</mat-step>
     <mat-step><ng-template matStepLabel>C</ng-template>stuff</mat-step>
</mat-horizontal-stepper>

styles.css: Current (this works for all steppers)

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

.mat-step-header[aria-selected="false"] {
  background-color: white !important;
}

I want to do something like this:

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

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

Since your classes are in tags that are parent to the mat-step-header tag, you can alter your CSS rules like so:

.blueStepper .mat-step-header[aria-selected='true'] {
  background-color: blue;
}

.greenStepper .mat-step-header[aria-selected='true'] {
  background-color: green;
}

https://stackblitz.com/edit/angular-pyhts2?file=src%2Fstyles.scss