$modern-theme-material: true;
 
//------------------------------------------ 
//-----Material User Defined Variables 
//------------------------------------------ 
 
/**
  * @var {string} $base-color-name
  * Material Design color name to be used as the primary application color.
  * For more information go here https://www.google.com/design/spec/style/color.html#color-color-palette
  */
$base-color-name: dynamic('blue');
 
/**
  * @var {string} $accent-color-name
  * Material Design color name to be used as the accent application color.
  * For more information go here https://www.google.com/design/spec/style/color.html#color-color-palette
  */
$accent-color-name: dynamic('orange');
 
/**
  * @var {boolean} $dark-mode
  * Toggles all calculations to dark backgrounds and light text
  */
$dark-mode: dynamic(false);
 
/**
  * @var {boolean} $enable-all-icon-classes
  * Determines if all Material icons should be added to the CSS
  * if not user must add each icon they wish to use
  * material-icon-class('arrow-back');
  */
$enable-all-icon-classes: dynamic(true);
 
/**
  * @var {boolean} $enable-color-classes
  * Determines if all colors should be added as a class selectors
  * for color and background-color
  */
$enable-color-classes: dynamic(false);
 
$content-padding: dynamic(16px);
$font-family: dynamic(Roboto, sans-serif);
$enable-big: dynamic(true);
$font-size: dynamic(13px);
$font-size-big: dynamic(14px);
$font-weight-normal: dynamic(400);
$font-weight-bold: dynamic(600);
$font-icon-font-family: dynamic('Material Icons');
 
//------------------------------------------ 
//----- Material generated variables 
//------------------------------------------ 
// Calculated variables, can be overridden 
$base-color: dynamic(material-color($base-color-name, '500'));
$base-highlight-color: dynamic(material-color($base-color-name, '300'));
$base-light-color: dynamic(material-color($base-color-name, '100'));
$base-dark-color: dynamic(material-color($base-color-name, '700'));
 
// TODO: Added explicit darken method with 0%. Fix Fashion complication  
// Fashion do not brings those functions in css-vars.js if in conditional statement which do not execute 
// with initial value. Here, initial darkmode value is false. 
$base-pressed-color: dynamic(darken(if($dark-mode, darken($base-color, 15%), lighten($base-color, 15%)), 0%));
$base-focused-color: dynamic(material-color($base-color-name, '400'));
$base-invisible-color: dynamic(rgba($base-color, 0));
$base-foreground-color: dynamic(material-foreground-color($base-color-name));
 
$accent-color: dynamic(material-color($accent-color-name, '500'));
$accent-light-color: dynamic(material-color($accent-color-name, '100'));
$accent-dark-color: dynamic(material-color($accent-color-name, '700'));
$accent-pressed-color: dynamic(if($dark-mode, darken($accent-color, 15%), lighten($accent-color, 15%)));
$accent-invisible-color: dynamic(rgba($accent-color, 0));
$accent-foreground-color: dynamic(material-foreground-color($accent-color-name));
 
$confirm-color: dynamic(material-color('light-green', '600'));
$confirm-pressed-color: dynamic(if($dark-mode, darken($confirm-color, 15%), lighten($confirm-color, 15%)));
 
$alert-color: dynamic(material-color('red', '800'));
$alert-pressed-color: dynamic(if($dark-mode, darken($alert-color, 15%), lighten($alert-color, 15%)));
 
$color: dynamic(if($dark-mode, #fff, #111111));
$reverse-color: dynamic(if($dark-mode, #222, #fff));
 
$highlight-color: dynamic(rgba($color, .54));
$disabled-color: dynamic(rgba($color, .38));
$reverse-disabled-color: dynamic(rgba($reverse-color, .38));
$divider-color: dynamic(mix($color, $reverse-color, 12%));
 
$selected-background-color: dynamic(if($dark-mode, $base-dark-color, material-color('grey', '300')));
$hovered-background-color: dynamic(if($dark-mode, #4d4d4d, material-color('grey', '200')));
 
$header-background-color: dynamic(if($dark-mode, material-color('grey', '800'), material-color('grey', '100')));
 
 
$faded-color: dynamic(if($dark-mode, #4d4d4d, #e1e1e1));
 
$background-color: dynamic(if($dark-mode, #303030, #fafafa));
$alt-background-color: dynamic(if($dark-mode, #3a3a3a, #f5f5f5));
 
$reverse-background-color: dynamic(if($dark-mode, #fafafa, #303030));
$reverse-alt-background-color: dynamic(if($dark-mode, #f5f5f5, #3a3a3a));
 
// Used for subtle overlays on top of items (picker bar, etc) 
$overlay-color: dynamic(if($dark-mode, rgba(#fff, .03), rgba(#000, .03)));
 
// Used for froala editor 
$reverse-border-color: dynamic(if($dark-mode, #212121, #e0e0e0));
$reverse-alt-border-color: dynamic(if($dark-mode, #3a3a3a, #e0e0e0));
 
//---------------------------------------------------------------------------------- 
// Font Icons 
 
$fi-class-name: dynamic(#{$prefix}font-icon);
$fi-icon-angle-left: dynamic(md-icon-keyboard-arrow-left);
$fi-icon-angle-right: dynamic(md-icon-keyboard-arrow-right);
$fi-icon-arrow-left: dynamic(md-icon-arrow-back);