@use 'sass:map';

@use "@angular/material" as mat;
@use '../global/index' as global;
@use '../themes/index' as themes;

$snack-bar-bg: #333333;

@mixin override-color($theme) {
  // Do nothing. light or dark use the same color and background.
}

@mixin override-theme($theme) {
  $color-config: mat.get-color-config($theme);
  $primary-palette: map.get($color-config, "primary");

  .mat-mdc-snack-bar-container {
    --mdc-snackbar-container-color: #{$snack-bar-bg};
    --mdc-snackbar-supporting-text-color: #{map.get(map.get($theme, foreground), text)};
    margin: global.$spacing *3;

    .mat-mdc-button-base {
      color: mat.get-color-from-palette($primary-palette);
      --mat-mdc-snack-bar-button-color: #{mat.get-color-from-palette($primary-palette)};
    }
  }
}