@use 'sass:map';
@use '@angular/material' as mat;
@use 'styles' ;

@include mat.elevation-classes();
@include mat.app-background();

$my-typography: mat.m2-define-typography-config();
@include mat.typography-hierarchy($my-typography);

// Note: Color palettes are generated from primary: #ffffff
$_palettes: (
  primary: mat.$blue-palette,
  tertiary: mat.$red-palette,
);

$_primary: map.get($_palettes, primary);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
  ),
));

$dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: $_primary,
  ),
));

html {
  @include mat.all-component-themes($light-theme);

  .dark-theme {
    @include mat.all-component-colors($dark-theme);
  }
}