Angular materials - unable to set a default mat.elevation while using &:hover does work

Question

Angular material 16.1.5.

I am trying to have my mat-card use an default elevation that should always be applied. And when hovering above the mat-card it should move from the default value to the hover value.

I created the following .scss class:

@use '@angular/material' as mat;
/* You can add global styles to this file, and also import other style files */

@import '@angular/material/prebuilt-themes/indigo-pink.css';


.my-custom-elevation {
  @include mat.elevation-transition();

  @include mat.elevation(7);  // This hould be its default value

  &:hover {
    @include mat.elevation(24); //and on hover move from 7 to 24
  }
} 

Now the hover value is being applied properly but the default value doesnt do anything. If someone could point out to me what i am misundestanding/doing wrong it would be very much appreciated.

use in html :

<mat-card class="course-card my-custom-elevation">
**stuff on card**
</mat-card>