// - 主色调，如需调整，同时也许要调整assets/style/element/index.scss中的主题色
$--color-primary: #2d8cf0;
// - 危险色，如需调整，同时也许要调整assets/style/element/index.scss中的危险色
$--color-danger: #F56C6C;
// - 字体路径
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@use 'element/index' as *;

// 自定义主题
// 主色调
$--color-primary-light: mix($color-white, $--color-primary, 20%);
$--color-primary-dark: mix($color-black, $--color-primary, 10%);
// 头部高度
$--header-height: 60px;
// 菜单宽度
$--menu-width: 255px;
// 页面最小宽度
$--page-min-width: 1000px;
// 字体
$--font-color: #282828;
$--font-color-gray: #999;
$--font-color-gray-deep: #555;
$--font-size: 13px;
$--font-family: 'Avenir', Helvetica, Arial, sans-serif;
// 背景色
$--background-color: #f7f7f7;
// 登录按钮背景色
$--login-button-background-color: linear-gradient(130deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
// 菜单色调
$--menu-background-color: #2f3044;
$--menu-hover-background-color: mix($color-white, $--menu-background-color, 20%);
$--menu-text-color: #9f9f9f;
$--menu-text-hover-color: #f7f7f7;
$--menu-active-background-color: $--menu-text-hover-color;
$--menu-active-text-color: #333;
$--menu-active-text-hover-color: $--menu-active-text-color;
$--submenu-background-color: mix($color-black, $--menu-background-color, 20%);
// 菜单选中后的圆弧大小
$--menu-active-radius-size: 10px;
// 危险色
$--color-danger-hover: mix($color-white, $--color-danger, 20%);
// alert提示色
$--alert-background-color: #f0faff;
$--alert-text-color: #555;
$--alert-border-color: #abdcff;
// 标签
$--tag-background-color: #eef5fd;
$--tag-text-color: #555;
$--tag-border-color: #abdcff;
:root {
  // 头部高度
  --header-height: #{$--header-height};
  // 菜单宽度
  --menu-width: #{$--menu-width};
  // 页面最小宽度
  --page-min-width: #{$--page-min-width};
  // 字体
  --font-color: #{$--font-color};
  --font-color-gray: #{$--font-color-gray};
  --font-color-gray-deep: #{$--font-color-gray-deep};
  --font-size: #{$--font-size};
  --font-family: #{$--font-family};
  // 主色调（注意：受到Element-UI的实现影响，修改该变量并不会影响Element-UI的主题色，如需调整组件主色调，需调整$--color-primary变量）
  --color-primary: #{$--color-primary};
  --color-primary-light: #{$--color-primary-light};
  --color-primary-dark: #{$--color-primary-dark};
  // 背景色
  --background-color: #{$--background-color};
  // 登录按钮背景
  --login-button-background-color: #{$--login-button-background-color};
  // 菜单色调
  --menu-background-color: #{$--menu-background-color};
  --menu-hover-background-color: #{$--menu-hover-background-color};
  --menu-text-color: #{$--menu-text-color};
  --menu-text-hover-color: #{$--menu-text-hover-color};
  --menu-active-background-color: #{$--menu-active-background-color};
  --menu-active-text-color: #{$--menu-active-text-color};
  --menu-active-text-hover-color: #{$--menu-active-text-hover-color};
  --submenu-background-color: #{$--submenu-background-color};
  // 菜单圆弧大小
  --menu-active-radius-size: #{$--menu-active-radius-size};
  // 危险色
  --color-danger: #{$--color-danger};
  --color-danger-hover: #{$--color-danger-hover};
  // alert提示色
  --alert-background-color: #{$--alert-background-color};
  --alert-text-color: #{$--alert-text-color};
  --alert-border-color: #{$--alert-border-color};
  // 标签
  --tag-background-color: #{$--tag-background-color};
  --tag-text-color: #{$--tag-text-color};
  --tag-border-color: #{$--tag-border-color};
}
