// Import material theming functions
@use '@angular/material' as mat;
// @import '@angular/material/theming';
@include mat.elevation-classes();
@include mat.app-background();
@import "./hex-to-rgba.scss";
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.

$dangl-app-primary: mat.m2-define-palette(mat.$m2-cyan-palette, 600, 500, 700, 800);
$dangl-app-accent:  mat.m2-define-palette(mat.$m2-blue-grey-palette, 500, 400, 700);

// The warn palette is optional (defaults to red).
$dangl-app-warn:    mat.m2-define-palette(mat.$m2-red-palette);

// Create the theme object (a Sass map containing all of the palettes).
$dangl-app-theme: mat.m2-define-light-theme((
 color: (
   primary: $dangl-app-primary,
   accent: $dangl-app-accent,
   warn: $dangl-app-warn,
 ),
 typography: mat.m2-define-typography-config(),
 density: 0,
));

// They are just exported below to be easier to use in the project
$color-primary: mat.m2-get-color-from-palette($dangl-app-primary);
$color-accent:  mat.m2-get-color-from-palette($dangl-app-accent);
$color-warn:    mat.m2-get-color-from-palette($dangl-app-warn);
$color-dark: #3b4c55;
$color-light: #bdbdbd;

:root {
  --color-primary: #{hex-to-rgba($color-primary,1)};
  --color-accent: #{hex-to-rgba($color-accent,1)};
  --color-warn: #{hex-to-rgba($color-warn,1)};
  --color-dark: #3b4c55;
  --color-light: #bdbdbd;
  --color-primary-rgba: #{hex-to-rgba($color-primary,1)};
}