@use '@angular/material' as mat;
@use 'lite-theme' as liteTheme;
@use 'dark-theme' as darkTheme;
@use 'sass:map';
@use './app/app.component' as appComponent;

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

@mixin create-dark-theme() {
  $theme: map.deep-merge(
    darkTheme.$dark-theme,
    (
      color: (
        background: (
          background: #1f1a24
        )
      )
    )
  );

  mat-card-content,
  mat-card-title {
    color: #f0f0f0;
  }

  @include mat.all-component-themes($theme);
  @include appComponent.app-theme($theme);
  @include mat.strong-focus-indicators-theme($theme);
  @include mat.strong-focus-indicators();
  @include mat.strong-focus-indicators-theme(liteTheme.$lite-theme);
}

@mixin create-light-theme() {
  $theme: map.deep-merge(
    liteTheme.$lite-theme,
    (
      color: (
        background: (
          background: #f0f0f0
        )
      )
    )
  );

  @include mat.all-component-themes($theme);
  @include appComponent.app-theme($theme);
  @include mat.strong-focus-indicators-theme($theme);
  @include mat.strong-focus-indicators();
  @include mat.strong-focus-indicators-theme(darkTheme.$dark-theme);
}
