@use '@angular/material' as mat;

// Custom material palette
@use 'material-palette' as *;

// Plus imports for other components in your app.
@use '../app/groups/groups-view/groups-view.component-theme.scss' as *;
@use '../app/centers/centers-view/centers-view.component-theme.scss' as *;
@use '../app/home/dashboard/dashboard.component-theme.scss' as *;
@use '../app/shares/shares-account-view/shares-account-view.component-theme.scss' as *;
@use 'content' as *;
@use 'dark_content' as *;

@include mat.all-component-typographies();

$mifosx-typography-level: mat.m2-define-typography-level(
  $font-family: Roboto,
  $font-weight: 400,
  $font-size: 14px,
  $line-height: 1.5,
  $letter-spacing: normal
);

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

/* ################################## Light theme ################################### */

$mifosx-color-config: (
  primary: mat.m2-define-palette($primary-palette),
  accent: mat.m2-define-palette($accent-palette),
  warn: mat.m2-define-palette(mat.$m2-red-palette)
);

$mifosx-typography: mat.m2-define-typography-config(
  $body-1: $mifosx-typography-level,
  $body-2: $mifosx-typography-level,
  $headline-1: $mifosx-typography-level,
  $headline-2: $mifosx-typography-level,
  $headline-3: $mifosx-typography-level,
  $headline-4: $mifosx-typography-level,
  $headline-5: $mifosx-typography-level,
  $headline-6: $mifosx-typography-level,
  $button: $mifosx-typography-level
);

$mifosx-density: 0;

$mifosx-app-theme: mat.m2-define-light-theme(
  (
    color: $mifosx-color-config,
    typography: $mifosx-typography,
    density: $mifosx-density
  )
);

@include mat.typography-hierarchy($mifosx-typography);
@include mat.all-component-themes($mifosx-app-theme);
@include groups-view-component-theme($mifosx-app-theme);
@include centers-view-component-theme($mifosx-app-theme);
@include dashboard-component-theme($mifosx-app-theme);
@include shares-account-view-component-theme($mifosx-app-theme);
@include account-view-component-theme($mifosx-app-theme);

/* ################################## Dark theme ################################### */

$mifosx-dark-color-config: (
  primary: mat.m2-define-palette($dark-primary-palette),
  accent: mat.m2-define-palette($dark-accent-palette),
  warn: mat.m2-define-palette(mat.$m2-red-palette)
);

$mifosx-app-dark-theme: mat.m2-define-dark-theme(
  (
    color: $mifosx-dark-color-config
  )
);

.dark-theme {
  @include mat.all-component-colors($mifosx-app-dark-theme);
  @include groups-view-component-theme($mifosx-app-dark-theme);
  @include centers-view-component-theme($mifosx-app-dark-theme);
  @include dashboard-component-theme($mifosx-app-dark-theme);
  @include shares-account-view-component-theme($mifosx-app-dark-theme);
  @include account-view-component-dark-theme($mifosx-app-dark-theme);
}