//------------------------------------------
//-----Material User Defined Variables
//------------------------------------------

//# fashion replaces $include-css-variables 
/**
 * @var {boolean} $enable-css-variables
 * When true will reference CSS variables for all exported variables
 * used in the theme. Otherwise normal sass conversion will apply.
 */
$enable-css-variables: dynamic(true);
 
/**
 * @var {string} $css-variable-selector
 * Selector to determine where CSS variables are inserted
 */
$css-variable-selector: dynamic(':root');
 
/**
  * @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('grey');

/**
  * @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);
$basic-padding: dynamic(8px);
$font-family: dynamic(Roboto, sans-serif);
$enable-big: dynamic(true);
$font-size: dynamic(13px);
$font-size-big: dynamic(14px);
$font-weight: dynamic(400);
$font-weight-normal: dynamic(400);
$font-weight-bold: dynamic(600);
$font-icon-font-family: dynamic('Material Icons', 'Font Awesome 5 Free');
$fontawesome-font-family: dynamic('Font Awesome 5 Free');

$base-gradient: none;
//------------------------------------------
//----- 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, #ffffff, #111111));
$reverse-color: dynamic(if($dark-mode, #222, #fff));
 
$panel-header-color: dynamic(#ffffff);
$window-header-color: dynamic(#111111);

$focus-font-color: dynamic(#ffffff);

$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 to update pressed state BG color for buttons
$pressed-color: dynamic(#0c7ce6);

//----------------------------------------------------------------------------------
// Font Icons

$fa-class-name: #{$prefix}font-icon;