// 布局整体
.el-container {
  &.el-container-style-dark {
    // background-color: @theme-light-color - 10;
    background: #F5F8FF;
  }

  &.el-container-style-light {
    background-color: @theme-light-color;
  }
}

// 布局左侧
.el-aside {
  &.el-aside-style-dark {
    background-color: @theme-dark-color;
    box-shadow: 5px 0 10px rgba(@theme-dark-color, 0.2);
  }

  &.el-aside-style-light {
    background-color: @theme-light-color;
    box-shadow: 5px 0 10px rgba(@theme-dark-color, 0.06);
  }
}

// 左侧菜单
.left-el-menu {
  &.el-menu-style-dark {
    background-color: @theme-dark-color;

    // 滚动条
    &::-webkit-scrollbar-thumb {
      background: @theme-dark-color + 50;
    }

    &::-webkit-scrollbar-track {
      background: #ededed;
    }

    // 没有二级样式
    .el-menu-item {
      color: @theme-gray-color;

      &:hover {
        background-color: @theme-dark-color + 10;
      }

      &.is-active {
        color: @theme-white-color;
        background-color: @theme-color;
      }
    }

    // 有二级样式
    .el-submenu {
      .el-menu-item {
        &:hover {
          background-color: @theme-dark-color + 30;
        }

        &.is-active {
          color: @theme-white-color;
          background-color: @theme-color;
        }
      }

      .el-submenu__title {
        color: @theme-gray-color;
      }

      .el-menu--inline {
        background-color: @theme-dark-color + 10;
      }
    }
  }

  &.el-menu-style-light {
    background-color: @theme-light-color;

    &::-webkit-scrollbar-thumb {
      background: @theme-light-color - 20;
    }

    &::-webkit-scrollbar-track {
      background: @theme-light-color;
    }

    // 没有二级样式
    :deep(.el-menu-item) {
      color: @theme-dark-gray-color;

      &:hover {
        background-color: @theme-light-color + 10;
      }

      &.is-active {
        color: @theme-white-color;
        background-color: @theme-color;
      }
    }

    // 有二级样式
    :deep(.el-submenu) {
      .el-menu-item {
        &:hover {
          background-color: @theme-light-color + 30;
        }

        &.is-active {
          color: @theme-white-color;
          background-color: @theme-color;
        }
      }

      .el-submenu__title {
        color: @theme-dark-gray-color;
      }

      .el-menu--inline {
        background-color: @theme-light-color + 10;
      }
    }
  }
}

// 左侧其他
.left-menu {
  .top-logo {
    &.top-logo-style-dark {
      .title {
        color: @theme-white-color;
      }
    }

    &.top-logo-style-light {
      .title {
        color: @theme-dark-color;
      }
    }
  }

  .support-text {
    &.support-text-style-dark {
      color: @theme-dark-color + 100;
    }

    &.support-text-style-light {
      color: @theme-gray-color;
    }
  }
}

// 顶部页签
.multiple_tag {
  :deep(.tag-tabs) {
    &.tag-tabs-style-dark {
      background-color: @theme-light-color;
      border-bottom: 1px solid @theme-light-color - 20;

      .is-active {
        border: 1px solid @theme-light-color - 20 !important;
      }
    }

    &.tag-tabs-style-light {
      background-color: @theme-light-color + 10;
      border-bottom: 1px solid @theme-light-color - 10;

      .is-active {
        border: 1px solid @theme-light-color - 10 !important;
      }
    }
  }
}

// 顶部栏
.top-nav {
  &.top-nav-style-dark {
    background-color: @theme-light-color;
    border-bottom: 1px solid @theme-light-color - 20;
  }

  &.top-nav-style-light {
    background-color: @theme-light-color + 10;
    border-bottom: 1px solid @theme-light-color - 10;
  }

  .person {
    .role-name {
      &.role-name-style-dark {
        color: @theme-white-color;
        background-color: @theme-dark-gray-color + 30;
      }

      &.role-name-style-light {
        color: @theme-white-color;
        background-color: @theme-gray-color + 20;
      }
    }

    .theme-change {
      .icon {
        &.theme-dark {
          color: @theme-color;
        }

        &.theme-light {
          color: @theme-gray-color;
        }
      }
    }
  }
}

// 底部版权
.footer {
  &.footer-style-dark {
    background-color: @theme-light-color;
    color: @theme-gray-color;
    border-top: 1px solid @theme-light-color - 20;
  }

  &.footer-style-light {
    background-color: @theme-light-color + 10;
    color: @theme-gray-color + 20;
    border-top: 1px solid @theme-light-color - 10;
  }
}

.el-menu {
  border: none;

}