@use "sass:map";
@use "@angular/material" as mat;

/** Copied from docs section **/

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// 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. Available color palettes: https://material.io/design/color/
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

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

/** 
** Application specific section - Global styles and mixins
**/

@mixin form-field-density($density) {
  $field-typography: mat.define-typography-config(
    $body-1: mat.define-typography-level(12px, 24px, 400),
  );
  @include mat.typography-level($field-typography, "body-1");
  @include mat.form-field-density($density);
}

// Define lowest possible density class to be used in application
// In the same manner -1...-5 classes can be defined
.mat-form-field-density-5 {
  @include form-field-density(-5);
}

@import "@angular/material/theming";

// Define application specific typography settings, font-family, etc
$typography-configuration: mat-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
);

@include angular-material-typography($typography-configuration);

/** 
** Light theme
**/
$light-theme: mat.define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
      warn: $theme-warn,
    ),
    density: 0,
  )
);

// Access and define a class with secondary color exposed
.secondary-text {
  color: map.get(mat.$light-theme-foreground-palette, "secondary-text");
}

:root {
  --text: #{map.get(mat.$light-theme-foreground-palette, "base")};
  --primary: #{mat.get-color-from-palette($theme-primary, 500)};
  --secondary: #{map.get(mat.$light-theme-foreground-palette, "secondary-text")};
}

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

/** 
** Dark theme
**/
$dark-theme: mat.define-dark-theme(
  (
    color: (
      primary: mat.define-palette(mat.$pink-palette),
      accent: mat.define-palette(mat.$blue-grey-palette),
    ),
    density: 0,
  )
);

@mixin _apply-dark-mode-colors() {
  @include mat.all-component-colors($dark-theme);

  .secondary-text {
    color: map.get(mat.$dark-theme-foreground-palette, "secondary-text");
  }

  :root {
    --text: #{map.get(mat.$dark-theme-foreground-palette, "base")};
    --primary: #{mat.get-color-from-palette(mat.$pink-palette, 500)};
    --secondary: #{map.get(mat.$dark-theme-background-palette, "secondary-text")};
  }
}

@media (prefers-color-scheme: dark) {
  @include _apply-dark-mode-colors();
}