// base color
$blue:#ceab70;
$light-blue:#ceab70;
$require:#f5e9d9;

$pink: #E65D6E;
$tiffany: #4AB7BD;

//yellow
$yellow:$blue;
$yellowHover:#ddc49b;
$yellowActive:#c2a169;

//green
$green: #5fb09c;
$greenHover: #8fc8ba;
$greenActive: #58a390;

//red
$red:#e05e5e;
$redActive: #d45959;

$menuText:#fff;
$menuActiveText:#fff;
$subMenuActiveText:#fff; // https://github.com/ElemeFE/element/issues/12951

// sidebar
$menuText:#fff;
$menuActiveText:#fff;
$subMenuActiveText:#fff; // https://github.com/ElemeFE/element/issues/12951

$menuBg:#333;
$menuHover:#404040;

$subMenuBg:#333;
$subMenuHover:#4d4d4d;

$sideBarWidth: 245px;



/// color|1|Brand Color|0
$--color-primary: #ceab70 !default;
$--color-blue: #4f9bdb !default;
$--color-blue-hover: #4a93cf !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
/// color|1|Functional Color|1
$--color-success: $green !default;
/// color|1|Functional Color|1
$--color-warning: $yellow !default;
/// color|1|Functional Color|1
$--color-danger:$red !default;
/// color|1|Functional Color|1
$--color-info: #909399 !default;

$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
$--color-info-light: mix($--color-white, $--color-info, 80%) !default;

$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
/// color|1|Font Color|2
$--color-text-primary: #303133 !default;
/// color|1|Font Color|2
$--color-text-regular: #606266 !default;
/// color|1|Font Color|2
$--color-text-secondary: #909399 !default;
/// color|1|Font Color|2
$--color-text-placeholder: #C0C4CC !default;
/// color|1|Border Color|3
$--border-color-base: #DCDFE6 !default;
/// color|1|Border Color|3
$--border-color-light: #E4E7ED !default;
/// color|1|Border Color|3
$--border-color-lighter: #EBEEF5 !default;
/// color|1|Border Color|3
$--border-color-extra-light: #F2F6FC !default;

// Background
/// color|1|Background Color|4
$--background-color-base: #F5F7FA !default;

/// fontSize||Font|1
$--button-small-font-size: 14px !default;
$--button-small-border-radius: 4px !default;
/// padding||Spacing|3
$--button-small-padding-vertical: 8px !default;
/// padding||Spacing|3
$--button-small-padding-horizontal: 19px !default;


/// color||Color|0
$--button-default-font-color: $--color-text-regular !default;
/// color||Color|0
$--button-default-background-color: $--color-white !default;
/// color||Color|0
$--button-default-border-color: $--border-color-base !default;

/// color||Color|0
$--button-disabled-font-color: $--color-text-placeholder !default;
/// color||Color|0
$--button-disabled-background-color: $--color-white !default;
/// color||Color|0
$--button-disabled-border-color: $--border-color-lighter !default;

/// color||Color|0
$--button-primary-border-color: $--color-primary !default;
/// color||Color|0
$--button-primary-font-color: $--color-white !default;
/// color||Color|0
$--button-primary-background-color: $--color-primary !default;
/// color||Color|0
$--button-success-border-color: $--color-success !default;
/// color||Color|0
$--button-success-font-color: $--color-white !default;
/// color||Color|0
$--button-success-background-color: $--color-success !default;
/// color||Color|0
$--button-warning-border-color: $--color-warning !default;
/// color||Color|0
$--button-warning-font-color: $--color-white !default;
/// color||Color|0
$--button-warning-background-color: $--color-warning !default;
/// color||Color|0
$--button-danger-border-color: $--color-danger !default;
/// color||Color|0
$--button-danger-font-color: $--color-white !default;
/// color||Color|0
$--button-danger-background-color: $--color-danger !default;
/// color||Color|0
$--button-info-border-color: $--color-info !default;
/// color||Color|0
$--button-info-font-color: $--color-white !default;
/// color||Color|0
$--button-info-background-color: $--color-info !default;

/* Input
-------------------------- */
$--input-font-size: 14px !default;
/// color||Color|0
$--input-font-color: #333 !default;
/// height||Other|4
$--input-width: 140px !default;
/// height||Other|4
$--input-height: 40px !default;
$--input-border: 1px solid #dbdbdb !default;
$--input-border-color: #dbdbdb !default;
/// borderRadius||Border|2
$--input-border-radius: 4px !default;
$--input-border-color-hover: #a8a8a8 !default;
/// color||Color|0
$--input-background-color: #fff !default;
$--input-fill-disabled: #f5f5f5 !default;
$--input-color-disabled: #333 !default;
/// color||Color|0
$--input-icon-color: #a8a8a8 !default;
/// color||Color|0
$--input-placeholder-color: #a8a8a8 !default;
$--input-max-width: 314px !default;

$--input-hover-border: #a8a8a8 !default;
// $--input-clear-hover-color: $--color-text-secondary !default;

$--input-focus-border: #ceab70 !default;
$--input-focus-fill: #fff !default;

$--input-disabled-fill: #f5f5f5 !default;
$--input-disabled-border: #dbdbdb !default;
$--input-disabled-color: #a8a8a8 !default;
$--input-disabled-placeholder-color: #a8a8a8 !default;

/// fontSize||Font|1
$--input-medium-font-size: 14px !default;
/// height||Other|4
$--input-medium-height: 36px !default;
/// fontSize||Font|1
$--input-small-font-size: 13px !default;
/// height||Other|4
$--input-small-height: 32px !default;
/// fontSize||Font|1
$--input-mini-font-size: 12px !default;
/// height||Other|4
$--input-mini-height: 28px !default;

/* Tree
-------------------------- */
/// color||Color|0
$--tree-node-hover-background-color: #f5f5f5 !default;
/// color||Color|0
$--tree-font-color: #333 !default;
/// color||Color|0
$--tree-expand-icon-color: #C0C4CC !default;

$--popover-arrow-size: 10px !default;



// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';