@use '@angular/material' as mat;
@import "@angular/material/theming"; // @import '../../../node_modules/@angular/material/theming';

$app-blue-theme-primary-palette: (
  50: #e2eef1,
  100: #b6d5dc,
  200: #86bac4,
  300: #559eac,
  400: #30899b,
  500: #0c7489,
  600: #0a6c81,
  700: #086176,
  800: #06576c,
  900: #034459,
  A100: #8bddff,
  A200: #58cfff,
  A400: #25c0ff,
  A700: #0bb9ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #ffffff,
    A700: #ffffff
  )
);

$app-blue-theme-accent-palette: (
  50: #e0f6f3,
  100: #b3e8e2,
  200: #80d9cf,
  300: #4dc9bc,
  400: #26bead,
  500: var(--primary-color-3),
  600: #00ab97,
  700: #00a28d,
  800: #009983,
  900: #008a72,
  A100: #b6fff0,
  A200: #83ffe6,
  A400: #50ffdc,
  A700: #36ffd7,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #ffffff,
    600: #ffffff,
    700: #000000,
    800: #000000,
    900: #000000,
    A100: #000000,
    A200: #ffffff,
    A400: #ffffff,
    A700: #ffffff
  )
);

$app-blue-theme-primary: mat.define-palette($app-blue-theme-primary-palette);
$app-blue-theme-accent: mat.define-palette($app-blue-theme-accent-palette, A200, A100, A400);
$app-blue-theme-warn: mat.define-palette(mat.$red-palette);

$app-blue-theme-background: (
  status-bar: map_get(mat.$grey-palette, 300),
  app-bar: map_get(mat.$grey-palette, 100),
  background: map_get(mat.$grey-palette, 50),
  hover: rgba(black, 0.04),
  card: white,
  dialog: white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map_get(mat.$grey-palette, 300),
  selected-disabled-button: map_get(mat.$grey-palette, 400),
  disabled-button-toggle: map_get(mat.$grey-palette, 200),
  unselected-chip: map_get(mat.$grey-palette, 300),
  disabled-list-option: map_get(mat.$grey-palette, 200)
);

$app-blue-theme-foreground: (
  base: black,
  divider: $dark-dividers,
  dividers: $dark-dividers,
  disabled: $dark-disabled-text,
  disabled-button: rgba(black, 0.26),
  disabled-text: $dark-disabled-text,
  hint-text: $dark-disabled-text,
  secondary-text: $dark-secondary-text,
  icon: rgba(black, 0.54),
  icons: rgba(black, 0.54),
  text: rgba(black, 0.87),
  slider-min: rgba(black, 0.87),
  slider-off: rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38)
);

$custom-theme: (
  primary: $app-blue-theme-primary,
  accent: $app-blue-theme-accent,
  warn: $app-blue-theme-warn,
  is-dark: false,
  foreground: $app-blue-theme-foreground,
  background: $app-blue-theme-background
);

$custom-typography: mat.define-legacy-typography-config(
  $font-family: "Lato, regular",
  $headline: mat.define-typography-level(32px, 48px, 700),
  $body-1: mat.define-typography-level(16px, 24px, 500)
);

.blue-theme {
  // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
//  The following line adds:
//    1. Default typography styles for all components
//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
//  If you specify typography styles for the components you use elsewhere, you should delete this line.
//  If you don't need the default component typographies but still want the hierarchy styles,
//  you can delete this line and instead use:
//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
@include mat.all-legacy-component-typographies();
@include mat.legacy-core();

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

  // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
  @include mat.legacy-typography-hierarchy($custom-typography);

  // Override typography for a specific Angular Material components.
  @include mat.legacy-checkbox-typography($custom-typography);

  // Override typography for all Angular Material, including mat-base-typography and all components.
  @include mat.all-legacy-component-typographies($custom-typography);
  //If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:

  // Override the typography in the core CSS.
  // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
//  The following line adds:
//    1. Default typography styles for all components
//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
//  If you specify typography styles for the components you use elsewhere, you should delete this line.
//  If you don't need the default component typographies but still want the hierarchy styles,
//  you can delete this line and instead use:
//    `@include mat.legacy-typography-hierarchy($custom-typography);`
@include mat.all-legacy-component-typographies($custom-typography);
@include mat.legacy-core();
}