@use 'sass:math';
@use '@angular/material' as mat;
@use 'variables' as variables;

$dark-text: variables.$dark-text;
$dark-primary-text: variables.$dark-primary-text;
$dark-accent-text: variables.$dark-accent-text;
$dark-disabled-text: variables.$dark-disabled-text;
$dark-dividers: variables.$dark-dividers;
$dark-focused: variables.$dark-focused;

$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,
);

$light-background:    #f8f9fa;
$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,
);

$mat-primary: (
  main: #06a04a,
  lighter: #b4e3c9,
  darker: #038432,
  200: #06a04a, // For slide toggle,
  contrast : (
    main: variables.$light-primary-text,
    lighter: $dark-primary-text,
    darker: variables.$light-primary-text,
  )
);
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);

$mat-accent: (
  main: #ffffff,
  lighter: #ffffff,
  darker: #ffffff,
  200: #ffffff, // For slide toggle,
  contrast : (
    main: $dark-primary-text,
    lighter: $dark-primary-text,
    darker: $dark-primary-text,
  )
);
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);

$mat-warn: (
  main: #f44336,
  lighter: #fcc7c3,
  darker: #ef2c22,
  200: #f44336, // For slide toggle,
  contrast : (
    main: variables.$light-primary-text,
    lighter: $dark-primary-text,
    darker: variables.$light-primary-text,
  )
);
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);

@function get-letter-spacing($tracking, $font-size) {
  @return math.div($tracking, $font-size * 16) * 1em;
}

$theme: (
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
    foreground: $mat-light-theme-foreground,
    background: $mat-light-theme-background,
  ),
  typography: mat.define-typography-config(
    $font-family: variables.$font-primary,
    $headline-6: mat.define-typography-level(20px, $line-height: 24px, $font-weight: 500, $font-family: variables.$font-primary, $letter-spacing: get-letter-spacing(0.25, 1.25)),
    $subtitle-1: mat.define-typography-level(16px, $line-height: 24px, $font-weight: 400, $font-family: variables.$font-primary, $letter-spacing: get-letter-spacing(0.15, 1)),
    $body-1: mat.define-typography-level(14px, $line-height: 24px, $font-weight: 500, $font-family: variables.$font-primary, $letter-spacing: get-letter-spacing(0.5, 1)),
    $caption: mat.define-typography-level(12px, $line-height: 18px, $font-weight: 400, $font-family: variables.$font-primary, $letter-spacing: get-letter-spacing(0.4, 0.75))
  ),
  density: 0
);
