Set Material snack bar background color using mixin (#3600)

Author: Nateowami

src/SIL.XForge.Scripture/ClientApp/src/styles.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'variables';
+@use '@angular/material' as mat;
 
 // This creates css variables for common breakpoints (needed when using MediaBreakpointService with BreakpointObserver)
 @use 'src/xforge-common/media-breakpoints/css-vars';
@@ -63,8 +64,12 @@ as-split.is-disabled > .as-split-gutter .as-split-gutter-icon {
   padding-top: 5px !important;
 }
 
-.mdc-snackbar.snackbar-error > div {
-  background-color: #{variables.$errorColor};
+.snackbar-error {
+  @include mat.snack-bar-overrides(
+    (
+      container-color: variables.$errorColor
+    )
+  );
 }
 
 .mdc-button.mat-mdc-unelevated-button,