@import "./dx.material.base.css";
@import "./dx-dashboard.light.min.css";

/* Global variables */
:root {
  /*
  * To create those variables visit: https://sassme.jim-nielsen.com/
  * --xxx-bg-lighten:   lighten(--xxx-bg, 5)
  * --xxx-bg-darken:    darken(--xxx-bg, 5)
  * --xxx-bg-themed:    --xxx-bg-lighten/darken (if it's a dark/light theme)
  * --xxx-bg-gradient:  lighten/darken(--xxx-bg, 25) (based on --xxx-bg-themed)
  */

  /* Base theme variables */
  --base-accent: #b62a4b;
  --base-text-color: rgba(0, 0, 0, 0.87);
  --base-bg: #ffffff;
  --base-bg-lighten: #ffffff;
  --base-bg-darken: #f2f2f2;
  --base-bg-themed: var(--base-bg-darken);
  --base-bg-gradient: #bfbfbf;
  --base-border-color: #e0e0e0;
  --base-border-radius: 2px;

  /* Header variables */
  --xxf-header-text-color: var(--base-text-color);
  --xxf-header-bg: var(--base-bg);
  /* Enable linear gradient */
  --xxf-header-bg: -webkit-linear-gradient(to right, var(--base-bg), var(--base-accent));
  --xxf-header-bg: linear-gradient(to right, var(--base-bg), var(--base-accent));

  /* Page toolbar variables */
  --xxf-page-toolbar-text-color: var(--base-text-color);
  --xxf-page-toolbar-bg: var(--base-bg);

  /* Navigation menu variables */
  --xxf-navigation-menu-text-color: #ffffff;
  --xxf-navigation-menu-bg: #363640;
  --xxf-navigation-menu-bg-themed: #42424e;
  --xxf-navigation-menu-border-color: #515159;
}