CSS class is ignored

// Single select
$ss-w-sm: 125px;
$ss-w-md: 147px;
$ss-w-lg: 180px;
$ss-w-xl: 200px;
$ss-w-2xl: 225px;

// Mixin to assign to a modifier a specific width
@mixin component-sizes {
  &--sm { width: $ss-w-sm; }
  &--md { width: $ss-w-md; }
  &--lg { width: $ss-w-lg; }
  &--xl { width: $ss-w-xl; }
  &--2xl { width: $ss-w-2xl; }
}

.mat-select {
  @include component-sizes;
}

<mat-form-field appearance="outline" class="mat-select--2xl">