@import "~@angular/material/theming";
@import 'egret.theme';

$fontConfig: (
  display-4: mat-typography-level(112px, 112px, 400, "Archivo", -0.0134em),
  display-3: mat-typography-level(56px, 56px, 400, "Archivo", -0.0089em),
  display-2: mat-typography-level(45px, 48px, 400, "Archivo", 0em),
  display-1: mat-typography-level(34px, 40px, 400, "Archivo", 0.0074em),
  headline: mat-typography-level(24px, 32px, 400, "Archivo", 0em),
  title: mat-typography-level(20px, 32px, 500, "Archivo", 0.0075em),
  subheading-2: mat-typography-level(16px, 28px, 400, "Archivo", 0.0094em),
  subheading-1: mat-typography-level(15px, 24px, 500, "Archivo", 0.0067em),
  card-title: mat-typography-level(15px, 24px, 500, "Archivo", 0.0067em),
  body-2: mat-typography-level(14px, 24px, 500, "Archivo", 0.0179em),
  body-1: mat-typography-level(14px, 20px, 400, "Archivo", 0.0179em),
  button: mat-typography-level(14px, 14px, 500, "Archivo", 0.0893em),
  caption: mat-typography-level(12px, 20px, 400, "Archivo", 0.0333em),
  input: mat-typography-level(inherit, 1.125, 400, "Archivo", 1.5px),
);

// Foreground Elements
// Light Theme Text
$dark-text: #000000;
$dark-primary-text: $body-color;
$dark-accent-text: rgba($dark-primary-text, 0.54);
$dark-disabled-text: rgba($dark-primary-text, 0.38);
$dark-dividers: rgba($dark-primary-text, 0.12);
$dark-focused: rgba($dark-primary-text, 0.12);

$mat-light-theme-foreground: (
  base: black,
  divider: $dark-dividers,
  dividers: $dark-dividers,
  disabled: $dark-disabled-text,
  disabled-button: rgba($dark-text, 0.26),
  disabled-text: $dark-disabled-text,
  elevation: black,
  secondary-text: $dark-accent-text,
  hint-text: $dark-disabled-text,
  accent-text: $dark-accent-text,
  icon: $dark-accent-text,
  icons: $dark-accent-text,
  text: $dark-primary-text,
  slider-min: $dark-primary-text,
  slider-off: rgba($dark-text, 0.26),
  slider-off-active: $dark-disabled-text,
);

// Foreground Elements
// Dark Theme Text
$light-text: #ffffff;
$light-primary-text: $light-text;
$light-accent-text: rgba($light-primary-text, 0.7);
$light-disabled-text: rgba($light-primary-text, 0.5);
$light-dividers: rgba($light-primary-text, 0.12);
$light-focused: rgba($light-primary-text, 0.12);

$mat-dark-theme-foreground: (
  base: $light-text,
  divider: $light-dividers,
  dividers: $light-dividers,
  disabled: $light-disabled-text,
  disabled-button: rgba($light-text, 0.3),
  disabled-text: $light-disabled-text,
  elevation: black,
  hint-text: $light-disabled-text,
  secondary-text: $light-accent-text,
  accent-text: $light-accent-text,
  icon: $light-text,
  icons: $light-text,
  text: $light-text,
  slider-min: $light-text,
  slider-off: rgba($light-text, 0.3),
  slider-off-active: rgba($light-text, 0.3),
);

// Background config
// Light Theme
$light-background: #fafafa;
$light-bg-darker-5: darken($light-background, 5%);
$light-bg-darker-10: darken($light-background, 10%);
$light-bg-darker-20: darken($light-background, 20%);
$light-bg-darker-30: darken($light-background, 30%);
$light-bg-lighter-5: lighten($light-background, 5%);
$dark-bg-tooltip: lighten(#2c2c2c, 20%);
$dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12);

$mat-light-theme-background: (
  background: $light-background,
  status-bar: $light-bg-darker-20,
  app-bar: $light-bg-darker-5,
  hover: $dark-bg-alpha-4,
  card: $light-bg-lighter-5,
  dialog: $light-bg-lighter-5,
  tooltip: $dark-bg-tooltip,
  disabled-button: $dark-bg-alpha-12,
  raised-button: $light-bg-lighter-5,
  focused-button: $dark-focused,
  selected-button: $light-bg-darker-20,
  selected-disabled-button: $light-bg-darker-30,
  disabled-button-toggle: $light-bg-darker-10,
  unselected-chip: $light-bg-darker-10,
  disabled-list-option: $light-bg-darker-10,
);

// Background config
// Dark Theme
$dark-background: #1a2038;
$dark-bg-lighter-5: lighten($dark-background, 5%);
$dark-bg-lighter-10: lighten($dark-background, 10%);
$dark-bg-lighter-20: lighten($dark-background, 20%);
$dark-bg-lighter-30: lighten($dark-background, 30%);
$light-bg-alpha-4: rgba(#fafafa, 0.04);
$light-bg-alpha-12: rgba(#fafafa, 0.12);

$mat-dark-theme-background: (
  background: $dark-background,
  status-bar: $dark-bg-lighter-20,
  app-bar: $dark-bg-lighter-5,
  hover: $light-bg-alpha-4,
  card: $dark-bg-lighter-5,
  dialog: $dark-bg-lighter-5,
  tooltip: $dark-bg-lighter-20,
  disabled-button: $light-bg-alpha-12,
  raised-button: $dark-bg-lighter-5,
  focused-button: $light-focused,
  selected-button: $dark-bg-lighter-20,
  selected-disabled-button: $dark-bg-lighter-30,
  disabled-button-toggle: $dark-bg-lighter-10,
  unselected-chip: $dark-bg-lighter-20,
  disabled-list-option: $dark-bg-lighter-10,
);

$config: mat-typography-config();
@include mat-card-typography($config);

// Compute font config
@include mat-core($fontConfig);




// Theme Config
$default-primary-palette: (
  main: #0081ff,
  lighter: #b3d9ff,
  darker: #0064ff,
  200: #0081ff,
  // For slide toggle,
    contrast:
    (
      main: $light-primary-text,
      lighter: $dark-primary-text,
      darker: $light-primary-text,
    ),
);
$default-theme-primary: mat-palette($default-primary-palette, main, lighter, darker);

$default-accent-palette: (
  main: #ff8a48,
  lighter: #ffdcc8,
  darker: #ff6d30,
  200: #ff8a48,
  // For slide toggle,
    contrast:
    (
      main: $dark-primary-text,
      lighter: $dark-primary-text,
      darker: $dark-primary-text,
    ),
);
$default-theme-accent: mat-palette($default-accent-palette, main, lighter, darker);

$default-warn-palette: (
  main: #ff3d57,
  lighter: #ffc5cd,
  darker: #ff273c,
  200: #ff3d57,
  // For slide toggle,
    contrast:
    (
      main: $light-primary-text,
      lighter: $dark-primary-text,
      darker: $light-primary-text,
    ),
);

$default-theme-warn: mat-palette($default-warn-palette, main, lighter, darker);

$default-theme: mat-light-theme($default-theme-primary, $default-theme-accent, $default-theme-warn);
$altTheme: mat-dark-theme($default-theme-primary, $default-theme-accent, $default-theme-warn);
// @debug $theme;

// MAIN THEME INIT
.egret-navy {
  @include angular-material-theme($default-theme);
  @include egret-theme($default-theme);
}

// DARK THEME INIT
.egret-navy-dark {
  @include angular-material-theme($altTheme);
  @include egret-theme($altTheme);
}


// STRUCTURE OF THEME OBJECT

// $test: (
//   _is-legacy-theme: true,
//   color: (
//     primary: (
//       main: #0081ff,
//       lighter: #b3d9ff,
//       darker: #0064ff,
//       200: #0081ff,
//       contrast: (
//         main: #ffffff,
//         lighter: #304156,
//         darker: #ffffff,
//       ),
//       default: #0081ff,
//       text: #0081ff,
//       default-contrast: #ffffff,
//       lighter-contrast: #304156,
//       darker-contrast: #ffffff,
//       "main-contrast": #ffffff,
//       "200-contrast": null,
//       "contrast-contrast": null,
//     ),
//     accent: (
//       main: #ff8a48,
//       lighter: #ffdcc8,
//       darker: #ff6d30,
//       200: #ff8a48,
//       contrast: (
//         main: #304156,
//         lighter: #304156,
//         darker: #304156,
//       ),
//       default: #ff8a48,
//       text: #ff8a48,
//       default-contrast: #304156,
//       lighter-contrast: #304156,
//       darker-contrast: #304156,
//       "main-contrast": #304156,
//       "200-contrast": null,
//       "contrast-contrast": null,
//     ),
//     warn: (
//       main: #ff3d57,
//       lighter: #ffc5cd,
//       darker: #ff273c,
//       200: #ff3d57,
//       contrast: (
//         main: #ffffff,
//         lighter: #304156,
//         darker: #ffffff,
//       ),
//       default: #ff3d57,
//       text: #ff3d57,
//       default-contrast: #ffffff,
//       lighter-contrast: #304156,
//       darker-contrast: #ffffff,
//       "main-contrast": #ffffff,
//       "200-contrast": null,
//       "contrast-contrast": null,
//     ),
//     is-dark: false,
//     foreground: (
//       base: black,
//       divider: rgba(48, 65, 86, 0.12),
//       dividers: rgba(48, 65, 86, 0.12),
//       disabled: rgba(48, 65, 86, 0.38),
//       disabled-button: rgba(0, 0, 0, 0.26),
//       disabled-text: rgba(48, 65, 86, 0.38),
//       elevation: black,
//       secondary-text: rgba(48, 65, 86, 0.54),
//       hint-text: rgba(48, 65, 86, 0.38),
//       accent-text: rgba(48, 65, 86, 0.54),
//       icon: rgba(48, 65, 86, 0.54),
//       icons: rgba(48, 65, 86, 0.54),
//       text: #304156,
//       slider-min: #304156,
//       slider-off: rgba(0, 0, 0, 0.26),
//       slider-off-active: rgba(48, 65, 86, 0.38),
//     ),
//     background: (
//       background: #fafafa,
//       status-bar: #c7c7c7,
//       app-bar: #ededed,
//       hover: rgba(44, 44, 44, 0.04),
//       card: white,
//       dialog: white,
//       tooltip: #5f5f5f,
//       disabled-button: rgba(44, 44, 44, 0.12),
//       raised-button: white,
//       focused-button: rgba(48, 65, 86, 0.12),
//       selected-button: #c7c7c7,
//       selected-disabled-button: #aeaeae,
//       disabled-button-toggle: #e1e1e1,
//       unselected-chip: #e1e1e1,
//       disabled-list-option: #e1e1e1,
//     ),
//   ),
//   primary: (
//     main: #0081ff,
//     lighter: #b3d9ff,
//     darker: #0064ff,
//     200: #0081ff,
//     contrast: (
//       main: #ffffff,
//       lighter: #304156,
//       darker: #ffffff,
//     ),
//     default: #0081ff,
//     text: #0081ff,
//     default-contrast: #ffffff,
//     lighter-contrast: #304156,
//     darker-contrast: #ffffff,
//     "main-contrast": #ffffff,
//     "200-contrast": null,
//     "contrast-contrast": null,
//   ),
//   accent: (
//     main: #ff8a48,
//     lighter: #ffdcc8,
//     darker: #ff6d30,
//     200: #ff8a48,
//     contrast: (
//       main: #304156,
//       lighter: #304156,
//       darker: #304156,
//     ),
//     default: #ff8a48,
//     text: #ff8a48,
//     default-contrast: #304156,
//     lighter-contrast: #304156,
//     darker-contrast: #304156,
//     "main-contrast": #304156,
//     "200-contrast": null,
//     "contrast-contrast": null,
//   ),
//   warn: (
//     main: #ff3d57,
//     lighter: #ffc5cd,
//     darker: #ff273c,
//     200: #ff3d57,
//     contrast: (
//       main: #ffffff,
//       lighter: #304156,
//       darker: #ffffff,
//     ),
//     default: #ff3d57,
//     text: #ff3d57,
//     default-contrast: #ffffff,
//     lighter-contrast: #304156,
//     darker-contrast: #ffffff,
//     "main-contrast": #ffffff,
//     "200-contrast": null,
//     "contrast-contrast": null,
//   ),
//   is-dark: false,
//   foreground: (
//     base: black,
//     divider: rgba(48, 65, 86, 0.12),
//     dividers: rgba(48, 65, 86, 0.12),
//     disabled: rgba(48, 65, 86, 0.38),
//     disabled-button: rgba(0, 0, 0, 0.26),
//     disabled-text: rgba(48, 65, 86, 0.38),
//     elevation: black,
//     secondary-text: rgba(48, 65, 86, 0.54),
//     hint-text: rgba(48, 65, 86, 0.38),
//     accent-text: rgba(48, 65, 86, 0.54),
//     icon: rgba(48, 65, 86, 0.54),
//     icons: rgba(48, 65, 86, 0.54),
//     text: #304156,
//     slider-min: #304156,
//     slider-off: rgba(0, 0, 0, 0.26),
//     slider-off-active: rgba(48, 65, 86, 0.38),
//   ),
//   background: (
//     background: #fafafa,
//     status-bar: #c7c7c7,
//     app-bar: #ededed,
//     hover: rgba(44, 44, 44, 0.04),
//     card: white,
//     dialog: white,
//     tooltip: #5f5f5f,
//     disabled-button: rgba(44, 44, 44, 0.12),
//     raised-button: white,
//     focused-button: rgba(48, 65, 86, 0.12),
//     selected-button: #c7c7c7,
//     selected-disabled-button: #aeaeae,
//     disabled-button-toggle: #e1e1e1,
//     unselected-chip: #e1e1e1,
//     disabled-list-option: #e1e1e1,
//   ),
// );
