// base color
$blue: #324157;
$light-blue: #333c46;
$red: #C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow: #FEC171;
$panGreen: #30B08F;

// 默认主题变量
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$menuBg: #304156;
$menuHover: #263445;
$mainColor: #f12528;

// 浅色主题theme-light
$menuLightBg: #ffffff;
$menuLightHover: #f0f1f5;
$menuLightText: #303133;
$menuLightActiveText: #409EFF;

// 基础变量
$base-sidebar-width: 210px;
$sideBarWidth: 200px;

// 菜单暗色变量
$base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;

// 组件变量
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

// 导出变量给其他模块使用
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  menuLightBg: $menuLightBg;
  menuLightHover: $menuLightHover;
  menuLightText: $menuLightText;
  menuLightActiveText: $menuLightActiveText;
  sideBarWidth: $sideBarWidth;
  // 导出基础颜色
  blue: $blue;
  lightBlue: $light-blue;
  red: $red;
  pink: $pink;
  green: $green;
  tiffany: $tiffany;
  yellow: $yellow;
  panGreen: $panGreen;
  // 导出组件颜色
  colorPrimary: $--color-primary;
  colorSuccess: $--color-success;
  colorWarning: $--color-warning;
  colorDanger: $--color-danger;
  colorInfo: $--color-info;
}

/*************** CSS变量定义 ***************/
/* 亮色模式变量 */
html {
  --el-gray-1: rgba(0, 0, 0, 0.45);
  --el-gray-2: #666666;
  --el-gray-3: rgb(235, 235, 235);

  // 页面背景
  --el-bg-color: #f1f3f8; // 主要页面背景颜色
  --main-color: #{$mainColor}; // （移动端）主要页面背景颜色

  // 表格相关
  --el-timeout-row: rgb(235, 235, 235); // 表格过期行颜色
  --el-background-editor-cell: #b2ddef; // 表格编辑单元格背景颜色

  // 侧边栏
  --sidebar-bg: #{$menuBg}; // 侧边栏
  --sidebar-text: #{$menuText}; // 侧边栏文字
  --menu-hover: #{$menuHover}; // 侧边栏菜单悬停

  // 顶部导航
  --navbar-bg: #ffffff; // 顶部导航栏
  --navbar-text: #303133; // 顶部导航栏文字

  // splitpanes 默认背景颜色
  --splitpanes-default-bg: #ffffff;

}

/* 暗黑模式变量 */
html.dark {
  --el-gray-1: white;
  --el-gray-2: white;
  --el-gray-3: #1d1e1f;

  // 页面背景
  --el-bg-color: #141414;

  // 表格相关
  --el-timeout-row: rgb(58, 58, 58);

  // 侧边栏
  --sidebar-bg: #141414;
  --sidebar-text: #ffffff;
  --menu-hover: #2d2d2d;
  --menu-active-text: #{$menuActiveText};

  // 顶部导航栏
  --navbar-bg: #141414;
  --navbar-text: #ffffff;
  --navbar-hover: #141414;

  // splitpanes default-theme 暗黑模式变量 
  --splitpanes-default-bg: #141414;

  /*************** 亮模式默认，暗黑模式需要覆盖的变量 ***************/
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #d0d0d0;
  --el-border-color: #434343;
  --el-border-color-light: #434343;

  // 标签栏
  --tags-bg: #141414;
  --tags-item-bg: #1d1e1f;
  --tags-item-border: #303030;
  --tags-item-text: #d0d0d0;
  --tags-item-hover: #2d2d2d;
  --tags-close-hover: #64666a;

  // splitpanes 组件暗黑模式变量
  --splitpanes-bg: #141414;
  --splitpanes-border: #303030;
  --splitpanes-splitter-bg: #1d1e1f;
  --splitpanes-splitter-hover-bg: #2d2d2d;

  // blockquote 暗黑模式变量
  --blockquote-bg: #1d1e1f;
  --blockquote-border: #303030;
  --blockquote-text: #d0d0d0;

  // Cron 时间表达式 模式变量
  --cron-border: #303030;



}