@import "~@angular/material/theming";
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
@import 'health-warn.scss';
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700|Material+Icons');
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();

// Colour palette generated using #1a50a5 as primary:
// http://mcg.mbitson.com/#!?strudel=%231a50a5
$md-monashpalette: (
    50 : #e4eaf4,
    100 : #bacbe4,
    200 : #8da8d2,
    300 : #5f85c0,
    400 : #3c6ab3,
    500 : #1a50a5,
    600 : #17499d,
    700 : #134093,
    800 : #0f378a,
    900 : #082779,
    A100 : #a8bbff,
    A200 : #7594ff,
    A400 : #426cff,
    A700 : #2958ff,
    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,
    )
);

// Define the default theme (same as the example above).
//$strudel-app-primary: mat-palette($mat-indigo);
$strudel-app-primary: mat-palette($md-monashpalette);
$strudel-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$strudel-app-theme:   mat-light-theme($strudel-app-primary, $strudel-app-accent);
$strudel-app-theme-lighter: mat-light-theme(mat-palette($strudel-app-primary,lighter),$strudel-app-accent);
$strudel-app-theme-darker: mat-light-theme(mat-palette($strudel-app-primary,darker),$strudel-app-accent);
$health-warn: $mat-pink;

$primary-light: mat-palette($md-monashpalette,A200);
$primary-darker: mat-palette($md-monashpalette,A700);

// Include the default theme styles.
@include angular-material-theme($strudel-app-theme);
@include health-warning-theme($strudel-app-theme);


// Define an alternate dark theme.
//$dark-primary: mat-palette($mat-blue-grey);
$dark-primary: mat-palette($md-monashpalette,800);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
//$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
$dark-theme:   mat-dark-theme($dark-primary, $strudel-app-accent, $dark-warn);

// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.strudel-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.strudel-light-theme {
  @include angular-material-theme($strudel-app-theme);
  @include health-warning-theme($strudel-app-theme);
  .darker-theme {
  @include angular-material-theme(mat-light-theme(mat-palette($strudel-app-primary,darker),mat-palette($strudel-app-accent,darker)));
  }
  .lighter-theme {
  @include angular-material-theme(mat-light-theme(mat-palette($strudel-app-primary,lighter),mat-palette($strudel-app-accent,lighter)));
  }
}
.strudel-dark-theme {
  @include angular-material-theme($dark-theme);
  @include health-warning-theme($dark-theme);
  .darker-theme {
  @include angular-material-theme(mat-dark-theme(mat-palette($strudel-app-primary,darker),mat-palette($strudel-app-accent,darker)));
  }
  .lighter-theme {
  @include angular-material-theme(mat-dark-theme(mat-palette($strudel-app-primary,lighter),mat-palette($strudel-app-accent,lighter)));
  }
}