@use '@angular/material' as mat;

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;

$mat-css-dark-theme-selector: '.theme-dark';

$gf-primary: (
  50: var(--gf-theme-primary-50),
  100: var(--gf-theme-primary-100),
  200: var(--gf-theme-primary-200),
  300: var(--gf-theme-primary-300),
  400: var(--gf-theme-primary-400),
  500: var(--gf-theme-primary-500),
  600: var(--gf-theme-primary-600),
  700: var(--gf-theme-primary-700),
  800: var(--gf-theme-primary-800),
  900: var(--gf-theme-primary-900),
  A100: var(--gf-theme-primary-A100),
  A200: var(--gf-theme-primary-A200),
  A400: var(--gf-theme-primary-A400),
  A700: var(--gf-theme-primary-A700),
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text
  )
);

$gf-secondary: (
  50: var(--gf-theme-secondary-50),
  100: var(--gf-theme-secondary-100),
  200: var(--gf-theme-secondary-200),
  300: var(--gf-theme-secondary-300),
  400: var(--gf-theme-secondary-400),
  500: var(--gf-theme-secondary-500),
  600: var(--gf-theme-secondary-600),
  700: var(--gf-theme-secondary-700),
  800: var(--gf-theme-secondary-800),
  900: var(--gf-theme-secondary-900),
  A100: var(--gf-theme-secondary-A100),
  A200: var(--gf-theme-secondary-A200),
  A400: var(--gf-theme-secondary-A400),
  A700: var(--gf-theme-secondary-A700),
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text
  )
);

$gf-typography: mat.m2-define-typography-config();

// Create default theme
$gf-theme-default: mat.m2-define-light-theme(
  (
    color: (
      accent: mat.m2-define-palette($gf-secondary, 500, 900, A100),
      primary: mat.m2-define-palette($gf-primary)
    ),
    density: -3,
    typography: $gf-typography
  )
);

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

// Create dark theme
$gf-theme-dark: mat.m2-define-dark-theme(
  (
    color: (
      accent: mat.m2-define-palette($gf-secondary, 500, 900, A100),
      primary: mat.m2-define-palette($gf-primary)
    ),
    density: -3,
    typography: $gf-typography
  )
);

.theme-dark {
  @include mat.all-component-colors($gf-theme-dark);
}

@include mat.button-density(0);
@include mat.elevation-classes();
@include mat.app-background();
@include mat.table-density(-1);

:root {
  --gf-theme-alpha-hover: 0.04;
  --gf-theme-primary-500: #36cfcc;
  --gf-theme-primary-500-rgb: 0, 187, 255;
  --gf-theme-secondary-500: #3686cf;
  --gf-theme-secondary-500-rgb: 78, 208, 94;

  --mat-dialog-container-small-max-width: 96vw;
  --mdc-filled-button-label-text-tracking: normal;
  --mdc-outlined-button-label-text-tracking: normal;
  --mdc-text-button-label-text-tracking: normal;
}