Set CSS vars in angular material (e.g. --mat-standard-button-toggle-height)

Question

I'm customizing the angular material theme and found the CSS vars for the values I want to customize.Now my SCSS for customizing looks like this:

:root {
  --mat-standard-button-toggle-selected-state-background-color: #{$color-primary};
  --mat-standard-button-toggle-selected-state-text-color: #{$color-font-light};
  --mat-standard-button-toggle-height: 44px;
}

This does not look very pretty. What would be the correct way to do it?