@import '~@angular/material/theming';
// 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();

// Value Capture Colors
$md-vc-solid-blue: (
  50: #e2e9ed,
  100: #b6c8d1,
  200: #86a4b3,
  300: #558094,
  400: #30647d,
  500: #0c4966,
  600: #0a425e,
  700: #083953,
  800: #063149,
  900: #032138,
  A100: #6eb7ff,
  A200: #3b9dff,
  A400: #0884ff,
  A700: #0077ee,
  contrast: (
    50: #000000,
    100: #000000,
    200: #ffffff,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #ffffff,
    A400: #ffffff,
    A700: #ffffff
  )
);

$md-vc-leaf-green: (
  50: #e5f0e9,
  100: #bedac8,
  200: #93c2a3,
  300: #68a97e,
  400: #479662,
  500: #278446,
  600: #237c3f,
  700: #1d7137,
  800: #17672f,
  900: #0e5420,
  A100: #8bffa4,
  A200: #58ff7d,
  A400: #25ff55,
  A700: #0bff41,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #ffffff,
    A700: #ffffff
  )
);

$md-vc-light-blue: (
  50: #e9f0f3,
  100: #c9d9e2,
  200: #a5c0cf,
  300: #81a6bb,
  400: #6693ad,
  500: #4b809e,
  600: #447896,
  700: #3b6d8c,
  800: #336382,
  900: #235070,
  A100: #b2ddff,
  A200: #7fc7ff,
  A400: #4cb0ff,
  A700: #32a5ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #ffffff,
    A700: #ffffff
  )
);

$md-vc-ever-green: (
  50: #e3ede7,
  100: #bbd2c2,
  200: #89b49a,
  300: #599572,
  400: #367f53,
  500: #126835,
  600: #106030,
  700: #0d5528,
  800: #0a4b22,
  900: #053a16,
  A100: #71ff93,
  A200: #3eff6d,
  A400: #0bff46,
  A700: #00f13a,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #ffffff,
    A700: #ffffff
  )
);

$md-vc-soy: (
  50: #f6f6e9,
  100: #e8e8c7,
  200: #d9d9a2,
  300: #caca7d,
  400: #bebe61,
  500: #b3b345,
  600: #acac3e,
  700: #a3a336,
  800: #9a9a2e,
  900: #8b8b1f,
  A100: #ffffc6,
  A200: #ffff93,
  A400: #ffff60,
  A700: #ffff47,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #ffffff,
    A700: #ffffff
  )
);

$md-vc-sand: (
  50: #fafaf3,
  100: #f4f2e1,
  200: #eceace,
  300: #e4e2b4,
  400: #dfdbab,
  500: #d9d59c,
  600: #d5d094,
  700: #cfca8a,
  800: #cac480,
  900: #c0ba6e,
  A100: #ffffff,
  A200: #ffffff,
  A400: #fffcd4,
  A700: #fffaba,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #ffffff,
    A700: #ffffff
  )
);

// customize typography for VCT
$custom-typography: mat-typography-config(
  $font-family: 'Roboto, Helvetice New, Arial, sans-serif',
  $headline: mat-typography-level(20px, 32px, 400)
);

@include mat-card-typography($custom-typography);

//customize Colours for VCT
$primary: mat-palette($md-vc-solid-blue, 500);
$accent: mat-palette($md-vc-leaf-green, 500, A200, A400);
$warn: mat-palette($mat-red, 500);

$vc-theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($vc-theme);
@include mat-checkbox-theme($vc-theme);

body {
  font-weight: normal;
}

h1,
h2,
h3,
h4 {
  font-weight: normal;
}

.mat-toolbar,
.mat-toolbar h1,
.mat-toolbar h2,
.mat-toolbar h3,
.mat-toolbar h4,
.mat-toolbar h5,
.mat-toolbar h6 {
  font-weight: 400 !important;
  font-size: 24px !important;
  background-color: #fff;
}

.mat-slide-toggle:not(.mat-checked).mat-disabled .mat-slide-toggle-bar {
  background-color: rgba(132, 39, 50, 0.5);
}

.mat-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: rgba(132, 39, 50, 0.8);
}

.mat-slide-toggle.mat-checked.mat-disabled .mat-slide-toggle-bar {
  background-color: rgba(39, 132, 70, 0.5);
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: rgba(39, 132, 70, 0.8);
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: white;
}