// $--color-primary: #409EFF;
$--color-primary: #356cec;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

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

// 默认菜单主题风格
$base-menu-color: #bfcbd9;
// $base-menu-color-active: #f4f4f5;
$base-menu-color-active: #fff;
$base-menu-background: var(--el-color-primary);
$base-logo-title-color: #ffffff;

$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529;

$base-sub-menu-background: var(--el-color-primary);
$base-sub-menu-hover: #001528;

// 自定义暗色菜单风格
/**
$base-menu-color:hsla(0,0%,100%,.65);
$base-menu-color-active:#fff;
$base-menu-background:#001529;
$base-logo-title-color: #ffffff;

$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;

$base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528;
*/


$base-sidebar-width: 220px;
$base-sidebar-width-container: 54px;

:root {
  --font-family: Arial, PingFang SC, SourceHanSansCN, 微软雅黑, Microsoft YaHei, Helvetica Neue, Helvetica, Hiragino Sans GB, sans-serif;
  --body-bg: #F3F5FB;
  --el-menu-horizontal-height: 50px;
  --header-height: 50px;
  --container-pd: 10px;
  --container-pd-inner: 20px;
  --navbar-height: 80px;
  --inner-height: 100vh;
  --inner-height: 100dvh;

  --highlight-bg-left: rgba(255,255,255,0.15); // 侧边栏-高亮渐变-左
  --highlight-bg-right: rgba(255,255,255,0.05); // 侧边栏-高亮渐变-右
}
:root {
  --base-sidebar-width: 220px;
  --base-sidebar-width-container: 64px;
  --base-sidebar-width-mini: 64px;
  // 默认菜单主题风格
  --base-menu-color: #bfcbd9;
  --base-menu-color-active: #fff;
  --base-menu-background: var(--el-color-primary);
  --base-logo-title-color: #ffffff;

  --base-menu-light-color: rgba(0, 0, 0, 0.7);
  --base-menu-light-background: #ffffff;
  --base-logo-light-title-color: #001529;

  --base-sub-menu-background: var(--el-color-primary);
  --base-sub-menu-hover: #001528;
  --el-transition: all .3s cubic-bezier(.645, .045, .355, 1), border 0s, color .1s, font-size 0s, transform 0s;
}

.app-wrapper {
  &.column {
    --base-sidebar-width: 266px;
  }
}

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  menuColor: var(--base-menu-color);
  menuLightColor: var(--base-menu-light-color);
  menuColorActive: var(--base-menu-color-active);
  menuBackground: var(--base-menu-background);
  menuLightBackground: var(--base-menu-light-background);
  subMenuBackground: var(--base-sub-menu-background);
  subMenuHover: var(--base-sub-menu-hover);
  sideBarWidth: var(--base-sidebar-width);
  logoTitleColor: var(--base-logo-title-color);
  logoLightTitleColor: var(--base-logo-light-title-color);
  primaryColor: var(--el-color-primary);
  successColor: $--color-success;
  dangerColor: $--color-danger;
  infoColor: $--color-info;
  warningColor: $--color-warning;
}
