/**
 * custom variables for material-ui component before project moved to inline-styles only
 *
 * This is place to put any variable overrides as well.
 *
 * @todo: overview and cleanup dead and duplicate code
 */
@desktop-keyline-increment:64px;
@grey-800: #444343;

@device-x-large: "only screen and (min-width: 1200px)";
@device-large:   "only screen and (min-width: 992px)";
@device-medium:  "only screen and (min-width: 768px)";
@device-small:   "only screen and (min-width: 375px)";

//Typography
//@import url("http://fonts.googleapis.com/css?family=Roboto:300,400,500");

@headingFontFamily: 'Roboto', sans-serif;
@contentFontFamily: 'Roboto', sans-serif;

@primary-1-color: blue;

@white: #fff;
@cyan-100: #000;
@cyan-500: #000;
@cyan-700: #000;

@grey-100: #ccc;
@grey-200: #ccc;
@grey-900: #000;

@grey-50: #ccc;
@grey-300: #cecece;
@pink-A400: pink;
@pink-A200: pink;
@pink-A100: pink;
@black: #000;
@dark-black: #000;
@min-black: #000;
@border-color: #000;
@desktop-gutter: 20px;
@desktop-gutter-mini: 20px;


//App Colors
@primary-1-color: @cyan-500;
@primary-1-color: @grey-800;

@primary-2-color: @cyan-700;
@primary-3-color: @cyan-100;
@accent-1-color: @pink-A200;
@accent-1-color: #2e8bcc;
@accent-2-color: @pink-A400;
@accent-3-color: @pink-A100;

//Text Colors
@body-text-color: @dark-black;

//Border Colors
@border-color: @grey-300;

//Component Colors
@app-bar-color: @primary-1-color;

// @app-bar-text-color: @dark-white;
@app-bar-text-color: @grey-50;

// @canvas-color: @white;
@canvas-color: @grey-100;

@drop-down-menu-icon-color: @min-black;
@left-nav-color: @white;
@subheader-border-color: @border-color;
@subheader-text-color: @primary-1-color;

// menu
@menu-background-color: white;
@menu-item-data-height: 32px;
@menu-item-height: 48px;
@menu-item-hover-color: rgba(0, 0, 0, .035);
@menu-item-padding: @desktop-gutter;
@menu-item-selected-text-color: @accent-1-color;
@menu-container-background-color: white;
@menu-subheader-padding: @desktop-gutter;

// buttons
@button-height: 36px;
@button-min-width: 88px;

@flat-button-color: @white;
@flat-button-hover-color: darken(@flat-button-color, 10%);
@flat-button-text-color: @body-text-color;
@flat-button-ripple-color: rgba(0,0,0,0.1);
@flat-button-focus-ripple-color: fade(@flat-button-ripple-color, 7%);
@flat-button-primary-hover-color: lighten(@accent-1-color, 32%);
@flat-button-primary-text-color: @accent-1-color;
@flat-button-primary-ripple-color: fade(darken(@flat-button-primary-text-color, 20%), 10%);
@flat-button-primary-focus-ripple-color: fade(@flat-button-primary-ripple-color, 7%);
@flat-button-disabled-text-color: fade(@flat-button-text-color, 30%);

@raised-button-color: @white;
@raised-button-hover-color: darken(@raised-button-color, 10%);
@raised-button-text-color: @body-text-color;
@raised-button-ripple-color: rgba(0,0,0,0.1);
@raised-button-focus-ripple-color: fade(@raised-button-ripple-color, 7%);
@raised-button-primary-color: @accent-1-color;
@raised-button-primary-hover-color: darken(@accent-1-color, 15%);
@raised-button-primary-text-color: @white;
@raised-button-primary-ripple-color: fade(@black, 15%);
@raised-button-primary-focus-ripple-color: @raised-button-primary-ripple-color;
@raised-button-disabled-color: @raised-button-hover-color;
@raised-button-disabled-text-color: fade(@raised-button-text-color, 30%);

@floating-action-button-size: 56px;
@floating-action-button-mini-size: 40px;
@floating-action-button-color: @accent-1-color;
@floating-action-button-icon-color: @white;
@floating-action-button-hover-color: @raised-button-primary-hover-color;
@floating-action-button-ripple-color: @raised-button-primary-ripple-color;
@floating-action-button-focus-ripple-color: @raised-button-primary-ripple-color;
@floating-action-button-disabled-color: @raised-button-disabled-color;
@floating-action-button-disabled-text-color: @raised-button-disabled-text-color;

//To be deprecidated
@fab-size: 56px;
@fab-mini-size: 40px;
@paper-button-height: 36px;
@paper-button-min-width: 88px;
@paper-button-default-color: @white;
@paper-button-default-text-color: @dark-black;
@paper-button-primary-color: @accent-1-color;
@paper-button-primary-text-color: @white;
@paper-button-disabled-color: @grey-200;
@paper-button-disabled-text-color: @min-black;

// input
@input-width: 320px;
@input-font-size: 16px;
@input-placeholder-size: 13px;
@input-error-color: red;
@input-bar-height: 2px;

// radio button
@radio-button-size: 16px;
@radio-button-border-color: black;
@radio-button-background-color: white;
@radio-button-check-color: black;

// checkbox
@checkbox-box-background-color: white;
@checkbox-box-border-color: black;
@checkbox-check-color: green;

// toggle
@toggle-width: 32px;
@toggle-checked-color: green;
@toggle-bar-color: black;

// toast
@mui-toast-color: white;
@mui-toast-background-color: #323232;
@mui-toast-action-color: yellow;

// layout
@app-bar-height: @desktop-keyline-increment;
@left-nav-width: (@desktop-keyline-increment * 4);
