@use 'sass:color';
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;

// 默认主题
html[data-vxe-ui-theme='dark'] {
  // 字体颜色
  --vxe-ui-font-color: #fff !important;
  --vxe-ui-table-font-color: #fff !important;
  --el-bg-color: #020409;

  // 禁用颜色
  --vxe-ui-font-disabled-color: #fff;

  // --el-disabled-text-color: #040404;
  // --vxe-ui-input-disabled-background-color: #fafafa;
  // --el-disabled-bg-color: #fafafa;
}

/* 整体暗色风格适配 */
html.dark {
  /* 自定义深色背景颜色 */
  $border-style: #303030;
  $color-white: #fff;

  /* 常用border-color 需要时可取用 */
  --udp-border-color: rgb(253 253 253 / 12%);

  /* switch关闭状态下的color 需要时可取用 */
  --udp-switch-off-color: #ffffff3f;

  .ut-grid-wrapper,
  .ut-content,
  .ut-content-top,
  .ut-content-body,
  .ut-divider-wrapper,
  .system-navbar,
  .tags-view,
  .contextmenu,
  .sidebar-container,
  .horizontal-header,
  .sidebar-logo-container,
  .horizontal-header .el-sub-menu__title,
  .horizontal-header .submenu-title-noDropdown,
  .home-page {
    background: var(--el-bg-color) !important;
  }

  .ut-content-body,
  .ut-divider-wrapper,
  .ut-content-top {
    border-color: var(--el-bg-color) !important;
  }

  .app-main,
  .app-main-nofixed-header {
    background: #020409 !important;
  }

  .logic-flow-view,
  .wangeditor {
    filter: invert(0.9) hue-rotate(180deg);
  }

  /* 标签页 */
  .tags-view {
    .arrow-left,
    .arrow-right {
      border-right: 1px solid $border-style;
      box-shadow: none;
    }

    .arrow-right {
      border-left: 1px solid $border-style;
    }

    .scroll-item {
      .el-icon-close {
        &:hover {
          color: rgb(255 255 255 / 85%) !important;
          background-color: rgb(255 255 255 / 12%);
        }
      }
    }

    .chrome-tab {
      .tag-title {
        color: #666;
      }

      &:hover {
        .chrome-tab__bg {
          color: #333;
        }

        .tag-title {
          color: #adadad;
        }
      }
    }
  }

  /* vxe-table */
  .vxe-table--header-wrapper,
  .vxe-table--body-wrapper {
    color: var(--el-text-color-primary);
    background: var(--el-bg-color) !important;

    .vxe-body--row.row--stripe {
      background-color: inherit !important;
    }

    .vxe-cell > span:first-child:not(.vxe-cell--title) {
      color: var(--vxe-ui-table-font-color);
    }
  }

  .vxe-table--render-default .vxe-body--row.row--current .col--checkbox {
    background-color: inherit !important;
  }

  // .vxe-toolbar {
  //   border-color: var(--el-table-row-hover-bg-color) !important;
  //   background: var(--el-table-row-hover-bg-color) !important;
  //   color: var(--el-table-header-text-color);
  // }

  .vxe-table--header {
    color: var(--el-table-header-text-color);
    background: var(--el-table-row-hover-bg-color) !important;
    border-color: var(--el-table-row-hover-bg-color) !important;
  }

  /* 项目配置面板 */
  .right-panel-items {
    .el-divider__text {
      --el-bg-color: var(--el-bg-color);
    }

    .el-divider--horizontal {
      border-top: none;
    }
  }

  /* 表单设计器 */
  .design-form {
    .el-main.config-content,
    .el-header,
    .el-main.widget-empty,
    .widget-form-list,
    .el-aside,
    .widget-view {
      background: var(--el-bg-color) !important;
    }

    .form-edit-widget-label a {
      color: $color-white;
      background: var(--el-color-primary);
      border: none;
      border-radius: 5px;
    }

    .el-aside {
      color: $color-white;
    }
  }

  /* element-plus */
  .el-table__cell {
    background: var(--el-bg-color);
  }

  .el-card {
    --el-card-bg-color: var(--el-bg-color);

    // border: none !important;
  }

  .el-backtop {
    --el-backtop-bg-color: var(--el-color-primary-light-9);
    --el-backtop-hover-bg-color: var(--el-color-primary);
  }

  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: transparent;
  }

  /* 自定义菜单搜索样式 */
  .udp-search-dialog {
    .el-dialog__footer {
      box-shadow:
        0 -1px 0 0 #555a64,
        0 -3px 6px 0 rgb(69 98 155 / 12%);
    }

    .search-footer {
      .search-footer-item {
        color: rgb(235 235 235 / 60%);

        .icon {
          box-shadow: none;
        }
      }
    }
  }

  /* 仿 el-scrollbar 滚动条样式 支持大多数浏览器，如Chrome、Edge、Firefox、Safari等 */
  .udp-scrollbar {
    scrollbar-color: rgb(63 64 66) transparent;

    ::-webkit-scrollbar-thumb {
      background-color: rgb(63 64 66);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgb(92 93 96);
    }
  }
}