/*
    Sets the base theme and global values
    until the client theme is loaded from the Config Service
*/

body {
  --P-50: #69b7fc;
  --P-100: #1e94fa;
  --P-200: #0477dc;
  --P-300: #035196;
  --P-400: #024178;
  --P-500: #02315a;
  --P-600: #01213c;
  --P-700: #01101e;
  --P-800: #000000;
  --P-900: #000000;
  --P-A100: #0472d2;
  --P-A200: #035caa;
  --P-A400: #022e55;
  --P-A700: #01101e;

  --A-50: #ffffff;
  --A-100: #ffffff;
  --A-200: #ffffff;
  --A-300: #e1e3e5;
  --A-400: #d1d4d6;
  --A-500: #c1c5c8;
  --A-600: #b1b6b9;
  --A-700: #a0a6ab;
  --A-800: #90979d;
  --A-900: #80888e;
  --A-A100: #ffffff;
  --A-A200: #ecedee;
  --A-A400: #bec2c5;
  --A-A700: #a0a6ab;

  --W-50: #ffffff;
  --W-100: #ffbdbd;
  --W-200: #ff8585;
  --W-300: #ff3d3d;
  --W-400: #ff1f1f;
  --W-500: #ff0000;
  --W-600: #e00000;
  --W-700: #c20000;
  --W-800: #a30000;
  --W-900: #850000;
  --W-A100: #ff7a7a;
  --W-A200: #ff5252;
  --W-A400: #fa0000;
  --W-A700: #c20000;
}

$variables: (--P-50: var(--P-50),
  --P-100: var(--P-100),
  --P-200: var(--P-200),
  --P-300: var(--P-300),
  --P-400: var(--P-400),
  --P-500: var(--P-500),
  --P-600: var(--P-600),
  --P-700: var(--P-700),
  --P-800: var(--P-800),
  --P-900: var(--P-900),
  --P-A100: var(--P-A100),
  --P-A200: var(--P-A200),
  --P-A400: var(--P-A400),
  --P-A700: var(--P-A700),

  --A-50: var(--A-50),
  --A-100: var(--A-100),
  --A-200: var(--A-200),
  --A-300: var(--A-300),
  --A-400: var(--A-400),
  --A-500: var(--A-500),
  --A-600: var(--A-600),
  --A-700: var(--A-700),
  --A-800: var(--A-800),
  --A-900: var(--A-900),
  --A-A100: var(--A-A100),
  --A-A200: var(--A-A200),
  --A-A400: var(--A-A400),
  --A-A700: var(--A-A700),

  --W-50: var(--W-50),
  --W-100: var(--W-100),
  --W-200: var(--W-200),
  --W-300: var(--W-300),
  --W-400: var(--W-400),
  --W-500: var(--W-500),
  --W-600: var(--W-600),
  --W-700: var(--W-700),
  --W-800: var(--W-800),
  --W-900: var(--W-900),
  --W-A100: var(--W-A100),
  --W-A200: var(--W-A200),
  --W-A400: var(--W-A400),
  --W-A700: var(--W-A700));

/*
    Functions to build and derive
    theme colors based on clients brand
*/

@function var($variable) {
  @return map-get($variables, $variable);
}

@function buildPalette($v) {
  @return mat-palette(prepPalette($v));
}

$DARK: $dark-primary-text;
$LIGHT: $light-primary-text;

// Pulls the CSS Attributes and
// assigns them to their respective Hue
@function prepPalette($v) {
  @return (50: var(--#{$v}-50),
    100: var(--#{$v}-100),
    200: var(--#{$v}-200),
    300: var(--#{$v}-300),
    400: var(--#{$v}-400),
    500: var(--#{$v}-500),
    600: var(--#{$v}-600),
    700: var(--#{$v}-700),
    800: var(--#{$v}-800),
    900: var(--#{$v}-900),
    A100: var(--#{$v}-A100),
    A200: var(--#{$v}-A200),
    A400: var(--#{$v}-A400),
    A700: var(--#{$v}-A700),
    contrast: (50: $DARK,
      100: $DARK,
      200: $DARK,
      300: $DARK,
      400: $DARK,
      500: $LIGHT,
      600: $LIGHT,
      700: $LIGHT,
      800: $LIGHT,
      900: $LIGHT,
      A100: $DARK,
      A200: $LIGHT,
      A400: $LIGHT,
      A700: $LIGHT,
    ));
}

/*
    Assigns the derived theme to the
    Angular Material components that need it
*/

@import '~@angular/material/theming';
@include mat-core();
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

// Below imports must be in the following order.

$P: 'P';
$A: 'A';
$W: 'W';

$primary: buildPalette($P);
$accent: buildPalette($A);
$warn: buildPalette($W);
$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);
@include mat-dialog-theme($theme);
@include mat-core-theme($theme);
@include mat-autocomplete-theme($theme);
@include mat-button-theme($theme);
@include mat-button-toggle-theme($theme);
@include mat-card-theme($theme);
@include mat-checkbox-theme($theme);
@include mat-chips-theme($theme);
@include mat-datepicker-theme($theme);
@include mat-grid-list-theme($theme);
@include mat-icon-theme($theme);
@include mat-input-theme($theme);
@include mat-list-theme($theme);
@include mat-menu-theme($theme);
@include mat-progress-bar-theme($theme);
@include mat-progress-spinner-theme($theme);
@include mat-radio-theme($theme);
@include mat-select-theme($theme);
@include mat-sidenav-theme($theme);
@include mat-slide-toggle-theme($theme);
@include mat-slider-theme($theme);
@include mat-tabs-theme($theme);
@include mat-toolbar-theme($theme);
@include mat-tooltip-theme($theme);

// Set colors as variables
// for use in other, non-material components
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);

$nums: (1: 1,
  2: 2,
  3: 3,
  4: 4,
  5: 5,
  6: 6);

$grids: (1: minmax(100px, 1fr),
  2: minmax(100px, 1fr) minmax(100px, 1fr),
  3: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr),
  4: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr),
  5: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr),
  6: minmax(40px, 1fr) minmax(40px, 1fr) minmax(40px, 1fr) minmax(40px, 1fr) minmax(40px, 1fr) minmax(40px, 1fr),
  "aa": auto auto,
  "a1": auto 1fr,
  "1a": 1fr auto,
  "1-2": minmax(100px, 1fr) minmax(300px, 2fr),
  "2-1": minmax(300px, 2fr) minmax(100px, 1fr),
  "1-3": minmax(100px, 1fr) minmax(300px, 3fr),
  "3-1": minmax(300px, 3fr) minmax(100px, 1fr),
  "2-3": minmax(175px, 2fr) minmax(275px, 3fr),
  "3-2": minmax(275px, 3fr) minmax(175px, 2fr));

.hide {
  display: none !important;
}

.show {
  display: grid;
}

.center {
  text-align: center;
}

.margin-unset {
  margin: unset !important;
}

.padding-unset {
  padding: unset !important;
}

@each $name,
$val in $nums {
  .vpadding#{$name} {
    padding-top: #{$name}rem;
    padding-bottom: #{$name}rem;
  }

  .hpadding#{$name} {
    padding-left: #{$name}rem;
    padding-right: #{$name}rem;
  }

  .padding#{$name} {
    padding: #{$name}rem;
  }

  .vmargin#{$name} {
    margin-top: #{$name}rem;
    margin-bottom: #{$name}rem;
  }

  .hmargin#{$name} {
    margin-left: #{$name}rem;
    margin-right: #{$name}rem;
  }

  .margin#{$name} {
    margin: #{$name}rem;
  }

  .vmin#{$name} {
    grid-template-rows: repeat(#{$name}, min-content);
  }
}

@each $name,
$val in $grids {
  .col#{$name} {
    display: grid !important;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: $val;
  }
}

.col-autofill {
  display: grid !important;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: repeat(autofill, minmax(25px, 1fr));
}

.col-autofit {
  display: grid !important;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: repeat(autofit, minmax(25px, 1fr));
}

@media (max-width: 600px) {
  .hide-xs {
    display: none !important;
  }

  .show-xs {
    display: grid;
  }

  @each $name,
  $val in $grids {
    .col#{$name}-xs-wide {
      display: grid !important;
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
      grid-template-columns: $val;
    }
  }

  @each $name,
  $val in $grids {
    .col#{$name}-xs {
      display: grid !important;
      grid-column-gap: 0.5rem;
      grid-row-gap: 0.5rem;
      grid-template-columns: $val;
    }
  }
}

@media (min-width: 600px) and (max-width: 768px) {
  .hide-sm {
    display: none !important;
  }

  .show-sm {
    display: grid;
  }

  @each $name,
  $val in $grids {
    .col#{$name}-sm-wide {
      display: grid !important;
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
      grid-template-columns: $val;
    }
  }

  @each $name,
  $val in $grids {
    .col#{$name}-sm {
      display: grid !important;
      grid-column-gap: 0.5rem;
      grid-row-gap: 0.5rem;
      grid-template-columns: $val;
    }
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .hide-md {
    display: none !important;
  }

  .show-md {
    display: grid;
  }

  @each $name,
  $val in $grids {
    .col#{$name}-md-wide {
      display: grid !important;
      grid-column-gap: 2rem;
      grid-row-gap: 2rem;
      grid-template-columns: $val;
    }
  }

  @each $name,
  $val in $grids {
    .col#{$name}-md {
      display: grid !important;
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
      grid-template-columns: $val;
    }
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .hide-lg {
    display: none !important;
  }

  .show-lg {
    display: grid;
  }

  @each $name,
  $val in $grids {
    .col#{$name}-lg-wide {
      display: grid !important;
      grid-column-gap: 2rem;
      grid-row-gap: 2rem;
      grid-template-columns: $val;
    }
  }

  @each $name,
  $val in $grids {
    .col#{$name}-lg {
      display: grid !important;
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
      grid-template-columns: $val;
    }
  }
}

@media (min-width: 1200px) {
  .hide-xl {
    display: none !important;
  }

  .show-xl {
    display: grid;
  }

  @each $name,
  $val in $grids {
    .col#{$name}-xl-wide {
      display: grid !important;
      grid-column-gap: 2rem;
      grid-row-gap: 2rem;
      grid-template-columns: $val;
    }
  }

  @each $name,
  $val in $grids {
    .col#{$name}-xl {
      display: grid !important;
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
      grid-template-columns: $val;
    }
  }
}

$colors: (primary: $primary,
  accent: $accent,
  warn: $warn);

$multipliers: (1: 1,
  2: 1.25,
  3: 1.5,
  4: 2,
  5: 3);

@each $k,
$v in $colors {
  .#{$k}-bg {
    background-color: mat-color($v) !important;
    color: mat-color($background, card) !important;
  }

  .#{$k}-color {
    color: mat-color($v) !important;
    background-color: mat-color($background, card) !important;
  }

  .flat-card-#{$k} {
    border-top: 0.4rem solid mat-color($v);
    background: white;
    padding: 1rem;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  @each $_k,
  $_v in $multipliers {
    .#{$k}-header#{$_k} {
      border-top: calc(0.135rem * #{$_v}) solid gray;
      border-bottom: calc(0.4rem * #{$_v}) solid mat-color($v);
    }
  }
}

@each $k,
$v in $multipliers {
  .main-header#{$k} {
    border-top: calc(0.135rem * #{$v}) solid mat-color($primary);
    border-bottom: calc(0.4rem * #{$v}) solid mat-color($accent);
  }

  .invert-header#{$k} {
    border-top: calc(0.15rem * #{$v}) solid mat-color($accent);
    border-bottom: calc(0.3rem * #{$v}) solid mat-color($primary);
  }

  .anti-gravity-z#{$k} {
    box-shadow: inset 0px 0px calc(2px * #{$v}) rgba(50, 50, 50, 0.75) !important;
  }
}

.link {
  cursor: pointer;
}

.invisibility-cloak {
  background-color: transparent !important;
}

.hard-edges {
  * {
    border-radius: 0 !important;
  }
}

.gray {
  color: rgba(128, 128, 128, 0.75);
}

.green {
  color: rgba(0, 128, 0, 0.75);
}

.red {
  color: rgba(255, 0, 0, 0.75);
}

.gold {
  color: rgba(255, 217, 0, 0.75);
}

.warning-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 1.5rem;
  color: rgba(255, 166, 0, 0.75);
  background: rgba(255, 166, 0, 0.25);
  border: 2px solid rgba(255, 166, 0, 0.75);
  border-radius: 5px;
}