How do I change the underline color of mat-select in Angular 18?

I want to change the underline color(white) of mat-select if I hover it.

<h4>Basic native select</h4>
<mat-toolbar class="header">
<mat-form-field style="padding-top:20px">
<mat-label style="color:white">Choose an option</mat-label>
<mat-select>
    <mat-option value="option1">Option 1</mat-option>
 </mat-select>
</mat-form-field>
</mat-toolbar>

I have the css like:

.mdc-line-ripple::after {
  transform: scaleX(1) !important;
  opacity: 1 !important;
}

demo: https://stackblitz.com/edit/mpa36f-8pmwyn?file=src%2Fstyles.scss

>Solution :

Use the below CSS, which looks for hover of the form-field, then we set the color which should be the border-bottom-color.

.custom-hover-color:hover {
  .mdc-text-field--filled:not(.mdc-text-field--disabled)
    .mdc-line-ripple::after {
    border-bottom-color: red;
  }
}

Stackblitz Demo