@use "@angular/material" as mat;
@use "variables";
@use "internal-helper";
@use "public-util";
// contains main overwrite of `mat-color` to make it all work
// needs to come after "@angular/material"
@use "mat-lib-overwrites";

@mixin init-css-vars($default-theme, $text) {
  // init css variables
  @include internal-helper.root($text);
  @include internal-helper.root($default-theme);
}

@mixin init-mat-theme(
  $dark-theme-selector,
  $typography-config: mat.m2-define-typography-config(),
  $density
) {
  @include mat.elevation-classes();
  @include mat.app-background();

  $primary: mat.m2-define-palette(variables.$palette-primary);
  $accent: mat.m2-define-palette(variables.$palette-accent);
  $warn: mat.m2-define-palette(variables.$palette-warn);

  $theme: mat.m2-define-light-theme(
    (
      color: (
        primary: $primary,
        accent: $accent,
        warn: $warn,
      ),
      typography: $typography-config,
      density: $density,
    )
  );

  $dark-theme: mat.m2-define-dark-theme(
    (
      color: (
        primary: $primary,
        accent: $accent,
        warn: $warn,
      ),
      typography: $typography-config,
      density: $density,
    )
  );

  // set global variable so passed-in content can use the theme
  $mat-css-theme: $theme !global; // stays for backwards-compatibility

  // NOTE: light theme is the default theme
  @include mat.all-component-themes($theme);

  // Fix mat-typography class, see https://github.com/angular/components/issues/26184
  @include mat.typography-hierarchy($theme);

  @content ($mat-css-theme);

  @if $dark-theme-selector {
    $mat-css-theme: $dark-theme !global;
    #{$dark-theme-selector} {
      @include mat.all-component-colors($dark-theme);
      // add content passed in, which can use the $theme variable to apply the dark theme to
      // other theme mixins needed by the app
      @content ($mat-css-theme);
    }
  }

  @include mat-lib-overwrites.other-overwrites;

  $mat-css-theme: null !global;
}

@mixin init-material-css-vars(
  $default-theme: variables.$default-light-theme,
  $dark-theme-selector: variables.$dark-theme-selector,
  $default-theme-text: variables.$text,
  $typography-config: mat.m2-define-typography-config(),
  $density: 0
) {
  @include init-css-vars($default-theme, $default-theme-text);
  @include init-mat-theme($dark-theme-selector, $typography-config, $density)
    using ($mat-css-theme) {
    @content ($mat-css-theme);
  }
}