//Grey scale colours
$black: #000000;
$grey10: lighten(black, 10%);
$grey20: lighten(black, 20%);
$grey30: lighten(black, 30%);
$grey40: lighten(black, 40%);
$grey50: lighten(black, 50%);
$grey60: lighten(black, 60%);
$grey70: lighten(black, 70%);
$grey80: lighten(black, 80%);
$grey90: lighten(black, 90%);
$grey95: lighten(black, 95%);
$white: #fff;

$theme-primary: #2f8990;
$theme-primary-light: #2f8990;
$theme-primary-dark: #397184;
$theme-secondary: #F18500;
$theme-secondary-light: #94efa6;
$theme-secondary-dark: #2f8b4a;
$theme-tertiary: #777675;
$theme-tertiary-light: #B0BDD0;
$theme-tertiary-dark: #B0BDD0;
$theme-light: $grey90;
$theme-dark: $grey20;
$theme-success:green;
$theme-warning:orange;
$theme-error:red;
$theme-danger:red;
$theme-info: lightblue;
$theme-disabled : $grey80; 

// Bootstrap overrides to map this library theme
$theme-colors: ("primary": $theme-primary,
  "secondary": $theme-secondary,
  "success": $theme-success,
  "info": $theme-info,
  "warning": $theme-warning,
  "danger": $theme-danger,
  "light": $theme-light,
  "dark": $theme-dark);

 
//Angular Material overrides to map this library theme
@import '~@angular/material/theming'; 
   
// Light Theme Text
$dark-text: #000000;
$dark-primary-text: rgba($dark-text, 0.87);
$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,
);

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

// Dark bg
$dark-background:     #2c2c2c;
$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);

// Background palette for dark themes.
$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,
  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,
);

// Compute font config
@include mat-core();
 
$mat-primary: (
  main: $theme-primary,
  lighter: $theme-primary-light,
  darker: $theme-primary-dark,
  200: $theme-primary, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-primary-material: mat-palette($mat-primary, main, lighter, darker);
 

$mat-accent: (
  main: $theme-secondary,
  lighter: $theme-light,
  darker: $theme-dark,
  200: $theme-secondary, // For slide toggle,
  contrast : (
    main: $dark-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-accent: mat-palette($mat-accent, main, lighter, darker);
 

$mat-warn: (
  main: $theme-danger,
  lighter: $theme-light,
  darker: $theme-dark, 
  200: $theme-secondary, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-warn: mat-palette($mat-warn, main, lighter, darker);

$lighttheme: mat-light-theme($theme-primary-material, $theme-accent, $theme-warn);
$darkTheme: mat-dark-theme($theme-primary-material, $theme-accent, $theme-warn);

// Theme Init
 @include angular-material-theme($lighttheme);

.theme-alternate {
  @include angular-material-theme($lighttheme);
}