$--color-primary: #E02E43 !default;

/* header var */
$--header-background-color: #ffffff !default;
$--header-title-background-color: #221d1d !default;

/* sidebar var */
$--sidebar-background-color: #221d1d !default;
$--sidebar-active-background-color: #3b3535 !default;
$--sidebar-icon-color: #898f9f !default;
$--sidebar-text-color: #ffffff !default;
$--sidebar-active-text-color: #ffffff !default;
$--sidebar-submenu-text-color: #898f9f !default;

.global {
  // 侧栏菜单
  .siderBar {
    background: $--sidebar-background-color;
    > .el-menu {
      background: $--sidebar-background-color;
      border-right: none;
      .el-menu-item {
        color: $--sidebar-text-color;
        border-left: solid 2px $--sidebar-background-color;

        &:hover, &:focus {
          background: $--sidebar-active-background-color;
        }
      }
      .el-menu-item.is-active {
        color: $--sidebar-active-text-color;
        background: $--sidebar-active-background-color;
        border-left: solid 2px $--color-primary;
      }
      .iconfont {
        color: $--sidebar-icon-color;
      }
    }
    .el-submenu {
      .el-menu {
        background: $--sidebar-background-color;
      }
    }

    .el-submenu__title {
      &:hover {
        background: $--sidebar-active-background-color;
      }
    }

    .is-opened {
      > .el-submenu__title {
        background: $--sidebar-background-color;
      }
    }
    .el-submenu__title {
      color: $--sidebar-submenu-text-color;
    }

    .el-menu-item {
      color: $--sidebar-text-color;
      &:hover {
        background: $--sidebar-active-background-color;
      }
    }
  }
  .el-menu {
    background-color: $--sidebar-background-color;
    color: $--sidebar-text-color;

    .el-menu-item {
      color: $--sidebar-text-color;

      &:hover, &:focus {
        background: $--sidebar-active-background-color;
      }
    }
  }
}

/* header */
.header {
  background-color: $--header-background-color;
  .title, {
    background-color: $--header-title-background-color;

    .icon-menu {
      @extend .title;
    }
  }
}