/* 自定义 element 暗黑模式样式 */
html.dark {
    // * element plus(可以全部注释掉，只是写在这里方便使用😀)
    // --el-color-primary: #409eff;
    // --el-color-primary-light-3: #3375b9;
    // --el-color-primary-light-5: #2a598a;
    // --el-color-primary-light-7: #213d5b;
    // --el-color-primary-light-8: #1d3043;
    // --el-color-primary-light-9: #18222c;
    // --el-color-primary-dark-2: #66b1ff;
    // --el-color-success: #67c23a;
    // --el-color-success-light-3: #4e8e2f;
    // --el-color-success-light-5: #3e6b27;
    // --el-color-success-light-7: #2d481f;
    // --el-color-success-light-8: #25371c;
    // --el-color-success-light-9: #1c2518;
    // --el-color-success-dark-2: #85ce61;
    // --el-color-warning: #e6a23c;
    // --el-color-warning-light-3: #a77730;
    // --el-color-warning-light-5: #7d5b28;
    // --el-color-warning-light-7: #533f20;
    // --el-color-warning-light-8: #3e301c;
    // --el-color-warning-light-9: #292218;
    // --el-color-warning-dark-2: #ebb563;
    // --el-color-danger: #f56c6c;
    // --el-color-danger-light-3: #b25252;
    // --el-color-danger-light-5: #854040;
    // --el-color-danger-light-7: #582e2e;
    // --el-color-danger-light-8: #412626;
    // --el-color-danger-light-9: #2b1d1d;
    // --el-color-danger-dark-2: #f78989;
    // --el-color-error: #f56c6c;
    // --el-color-error-light-3: #b25252;
    // --el-color-error-light-5: #854040;
    // --el-color-error-light-7: #582e2e;
    // --el-color-error-light-8: #412626;
    // --el-color-error-light-9: #2b1d1d;
    // --el-color-error-dark-2: #f78989;
    // --el-color-info: #909399;
    // --el-color-info-light-3: #6b6d71;
    // --el-color-info-light-5: #525457;
    // --el-color-info-light-7: #393a3c;
    // --el-color-info-light-8: #2d2d2f;
    // --el-color-info-light-9: #202121;
    // --el-color-info-dark-2: #a6a9ad;
    // --el-box-shadow: 0 12px 32px 4px rgb(0 0 0 / 36%), 0 8px 20px rgb(0 0 0 / 72%);
    // --el-box-shadow-light: 0 0 12px rgb(0 0 0 / 72%);
    // --el-box-shadow-lighter: 0 0 6px rgb(0 0 0 / 72%);
    // --el-box-shadow-dark: 0 16px 48px 16px rgb(0 0 0 / 72%), 0 12px 32px #000000, 0 8px 16px -8px #000000;
    // --el-bg-color-page: #0a0a0a;
    // --el-bg-color: #141414;
    // --el-bg-color-overlay: #1d1e1f;
    // --el-text-color-primary: #e5eaf3;
    // --el-text-color-regular: #cfd3dc;
    // --el-text-color-secondary: #a3a6ad;
    // --el-text-color-placeholder: #8d9095;
    // --el-text-color-disabled: #6c6e72;
    // --el-border-color-darker: #636466;
    // --el-border-color-dark: #58585b;
    // --el-border-color: #4c4d4f;
    // --el-border-color-light: #414243;
    // --el-border-color-lighter: #363637;
    // --el-border-color-extra-light: #2b2b2c;
    // --el-fill-color-darker: #424243;
    // --el-fill-color-dark: #39393a;
    // --el-fill-color: #303030;
    // --el-fill-color-light: #262727;
    // --el-fill-color-lighter: #1d1d1d;
    // --el-fill-color-extra-light: #191919;
    // --el-fill-color-blank: transparent;
    // --el-mask-color: rgb(0 0 0 / 80%);
    // --el-mask-color-extra-light: rgb(0 0 0 / 30%);

    // * panel-admin
    --panel-login-shadow-light: 5px 5px 15px rgb(255 255 255 / 20%);
    --panel-box-shadow-light: 0 0 10px rgb(255 255 255 / 10%);
    --panel-border-light: 1px solid #4c4c4d;
    --panel-main-bg-color: #0d0d0d;
    --panel-popup-color: #060708;

    // * wangEditor
    --w-e-textarea-bg-color: #1b1b1b;
    --w-e-textarea-color: #eeeeee;

    // * 以下为自定义暗黑模式内容
    // login
    .login-container {
        background-color: var(--el-fill-color-extra-light) !important;
        .login-box {
            background-color: var(--el-mask-color) !important;
            .login-form {
                background-color: var(--el-bg-color) !important;
                box-shadow: var(--panel-login-shadow-light) !important;
                .logo-text {
                    color: var(--el-text-color-primary) !important;
                }
            }
        }
    }

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

    // content-box
    .content-box {
        .text {
            color: var(--el-text-color-regular) !important;
        }
    }

    // dataVisualize-box
    .dataVisualize-box {
        .top-box,
        .bottom-box {
            box-shadow: var(--panel-box-shadow-light) !important;
        }
    }

    // error-message
    .not-container {
        .not-detail {
            h2 {
                color: var(--el-text-color-primary) !important;
            }
        }
    }

    // el-table
    .table-box {
        .el-table {
            .el-table__header th {
                color: var(--el-text-color-regular) !important;
                background-color: var(--el-bg-color) !important;
            }
        }
    }

    .el-table {
        --el-table-border-color: #696969;
        //fit2cloud-ui 自定义
        --el-table-text-color: #cfcfcf;

        // $table-header-bgColor: #f5f6f7 !default;
        .fu-table-header th {
            border-top: 1px solid var(--el-table-border-color);
            font-weight: 500 !important;
            color: var(--el-text-color-regular) !important;
            background-color: var(--el-bg-color) !important;
        }
    }

    // el-drawer
    .el-drawer {
        .el-drawer__header {
            border-bottom: var(--panel-border-light) !important;
            span {
                color: var(--el-text-color-primary) !important;
            }
        }
        .el-drawer__footer {
            border-top: var(--panel-border-light) !important;
        }
    }

    //  el-dialog
    .el-dialog {
        .el-dialog__header {
            border-bottom: var(--panel-border-light) !important;
        }
    }

    // layout
    .el-container {
        .el-aside {
            .menu {
                background-color: var(--el-bg-color) !important;
                border-right: var(--panel-border-light) !important;
                .logo {
                    border-bottom: var(--panel-border-light) !important;
                }
                .el-menu,
                .el-sub-menu,
                .el-sub-menu__title {
                    background-color: var(--el-bg-color) !important;
                }
            }
        }
        .el-header {
            .header {
                background-color: var(--el-bg-color) !important;
                border-bottom-color: var(--el-border-color-light) !important;
                .header-ri {
                    .icon-style {
                        color: var(--el-text-color-regular) !important;
                    }
                    .username {
                        color: var(--el-text-color-regular) !important;
                    }
                }
            }
        }
        .el-main {
            background-color: var(--panel-main-bg-color) !important;
            .main-box {
                background-color: var(--el-bg-color) !important;
            }
        }
        .el-tabs {
            background-color: var(--el-bg-color) !important;
        }
        .el-footer {
            .footer {
                background-color: var(--el-bg-color) !important;
                border-top-color: var(--el-border-color-light) !important;
                a {
                    color: var(--el-text-color-regular) !important;
                }
            }
        }
    }

    // menu-popup
    .el-menu--popup-container {
        .el-menu {
            background-color: var(--el-bg-color) !important;
        }
    }

    // guide
    #driver-highlighted-element-stage {
        background-color: var(--el-color-info-light-5) !important;
    }
}
