/** element内置黑暗主题 */
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;

/** 自定义黑暗主题 */
html.dark {
  // * admin
  --v-bg-color: #141414;
  --v-main-bg-color: #0d0d0d;
  --v-border-light: 1px solid #4c4c4d;

  // scroll-bar
  ::-webkit-scrollbar {
    background-color: var(--el-scrollbar-bg-color) !important;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--el-border-color-darker) !important;
  }

  .layout-sidebar-container {
    background-color: var(--v-bg-color) !important;
  }

  .app-main-container {
    background-color: var(--v-main-bg-color) !important;

    .card {
      background-color: var(--v-bg-color) !important;
    }
  }

  .layout-footer-container {
    color: var(--el-text-color-regular) !important;
    background-color: var(--v-main-bg-color) !important;
  }

  .fold-unfold {
    color: #fff !important;
  }

  .el-menu,
  .el-sub-menu,
  .el-menu-item,
  .el-sub-menu__title {
    background-color: var(--v-bg-color) !important;

    &:not(.is-active) {
      color: #bdbdc0 !important;
    }

    &.is-active {
      color: #fff !important;
      background-color: #000 !important;
    }
  }

  .el-menu-item:not(.is-active):hover {
    background-color: var(--v-main-bg-color) !important;
  }

  .nav-bar-container {
    background-color: var(--v-bg-color) !important;

    // .el-icon {
    //   color: #fff !important;
    // }
  }

  .table-header {
    .el-icon {
      color: #fff;
    }
  }

  .tabs-bar-container {
    background-color: var(--v-bg-color) !important;
    border-top: 1px solid var(--el-border-color-light) !important;

    .tabs-action {
      .el-icon {
        color: #fff !important;
      }
    }

    .fold-unfold {
      color: #fff;
    }

    .el-tabs__item.is-active {
      color: var(--el-color-primary);
      background-color: var(--v-main-bg-color) !important;

      .el-icon {
        color: var(--el-color-primary) !important;
      }
    }

    .el-tabs__item:not(.is_active):hover {
      background-color: var(--v-main-bg-color) !important;

      .el-icon {
        color: var(--el-color-primary) !important;
      }
    }
  }
}
