@import '../icon/iconfont.css';

@font-face {
    font-family: 'electronicFont';
    src: url('../fonts/CursedTimerUlil-Aznm.ttf');
}

@font-face {
    font-family: 'YouSheBiaoTiHei';
    src: url('../fonts/YouSheBiaoTiHei.ttf');
}

@font-face {
    font-family: 'YouSheBiaoTiHei-Bold';
    src: url('../fonts/YouSheBiaoTiHei-Bold.ttf');
}

@font-face {
    font-family: 'PingFang SC';
    src: url('../fonts/SourceHanSansSC-Normal-2.woff2');
}

@font-face {
    font-family: 'FZZhengHei';
    src: url('../fonts/FZZhengHeiS-R-GB.ttf');
}

/*
  思源宋体
*/

@font-face {
    font-family: 'SourceHanSerifCN-Medium';
    src: url('../fonts/SourceHanSerifCN-Medium.otf');
}

/*
  英文
*/
@font-face {
    font-family: 'Lato-Regular';
    src: url('../fonts/Lato-Regular.ttf');
}

.el-menu--popup {
    width: 180px;
    background: $color-white;
    box-shadow: 0 0 10px 0 rgba(43, 148, 220, 0.3);
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;

    .el-menu-item {
        height: 40px;
        line-height: 40px;
        border-radius: 8px;
        padding-left: 40px;
        margin-bottom: 8px;

        &:last-child {
            margin-bottom: 0;
        }

        svg,
        span {
            font-size: 14px;
            font-family: Microsoft YaHei,
            serif;
            color: #333333;
        }

        &:hover {
            svg,
            span {
                color: #4080ff;
            }
        }

        &:focus {
        }

        &.is-active {
            width: 100%;
            background: #4080ff;

            svg,
            span {
                color: #fff;
            }
        }
    }
}

.tooltip-wrapper {
    position: relative;
    display: inline-block;
    padding: 4px 6px;
    top: 10px;
}

.tooltip-wrapper::before {
    content: '';
    position: absolute;
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: transparent;
    border-top-color: black;
    opacity: 0;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-wrapper:hover > .msg-log-content {
    opacity: 1;
    position: static;
    display: inline-block;
}

.msg-log-icon {
    position: relative;
    top: -10px;
}

.msg-log-icon:hover + .msg-log-content {
    opacity: 1;
    position: static;
    display: inline-block;
}

.msg-log-content {
    position: absolute;
    background: black;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    padding: 4px 2px;
    min-width: 80px;
    pointer-events: auto;
    opacity: 0;
    left: 50%;
    top: -5px;
    transform: translateX(-50%) translateY(-100%);
}

.tooltip-wrapper:hover::after,
.tooltip-wrapper:hover::before {
    opacity: 1;
}

/* 右侧 */
.tooltip-wrapper:hover[position='right']::before {
    top: 15%;
    left: 8%;
    margin-left: -3px;
    transform: translateY(-50%) rotate(-90deg);
}

.tooltip-wrapper[position='right'] > .msg-log-content {
    top: 50%;
    left: 100%;
    margin-left: 10px;
    transform: translateY(-50%);
}

// 导出按钮的间距
.export-import-container + .export-import-container,
.export-import-container + .el-button,
.el-button + .export-import-container,
.ht-delete-button + .export-import-container {
    margin-left: 10px;
}

/* 层级 */
.v-modal {
    //z-index: 11 !important;
}

/* tab */
.el-tabs {
    width: 100%;
    height: 100%;
}

.el-tag {
    font-size: 14px !important;
}

.el-tag,
.el-input__inner {
    font-size: 13px;
}

.el-tabs__content {
    width: 100%;
    height: 100%;
}

/* 穿梭框 */
.el-transfer {
    height: 100% !important;
    display: flex;
}

.el-transfer-panel__body {
    height: 100% !important;
}

.el-transfer-panel {
    flex: 1 !important;
    height: 100% !important;
}

.el-checkbox-group {
    // height: 458px !important;
}

.el-transfer__buttons {
    width: 10% !important;
    line-height: 584px !important;
}

// 全部修改弹层样式高度
.el-dialog__body {
    max-height: 85vh;
    overflow: auto;
}

.fvue-icon {
    font-size: 28px;
}

.fvue-icon:hover {
    cursor: pointer;
    color: #409eff;
}

.el-dialog__wrapper {
    background-color: rgba(0, 0, 0, 0.3);
}

.el-input__inner::-webkit-outer-spin-button,
.el-input__inner::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.el-link {
    padding: 0 14px;
    position: relative;

    &:not(:last-child) {
        border-right: 1px solid $system-border-color2;
    }

    &:first-child {
        padding-left: 0;
    }

    &:last-child {
        padding-right: 0;
    }
}

.el-link--inner,
.el-cascader__search-input,
.el-input--suffix .el-input__inner,
.el-input__inner,
.el-select-dropdown__item span,
.el-message-box__message p,
.el-message-box__title span,
.el-icon-close:before,
.el-icon-plus,
.el-icon-delete,
.el-icon-upload,
.el-icon-upload2,
.el-button span {
    font-size: 14px !important;
}

.el-input__wrapper,
.el-textarea__inner,
.el-select__wrapper {
    background-color: var(--theme-system-input-bg) !important;
    box-shadow: 0 0 0 1px var(--theme-border-input) inset !important;
    // box-shadow: rgb(67, 161, 255) 0px 0px 0px 1px inset !important;
}

.el-input__wrapper:hover,
.el-textarea__inner:hover,
.el-select__wrapper:hover {
    box-shadow: 0 0 0 1px var(--theme-primary) inset !important;
}

.el-input.el-input-group--append:hover .el-input__inner {
    border-color: transparent !important;
}

.el-input__inner,
.el-cascader__search-input {
    background-color: var(--theme-system-input-bg);
    color: var(--theme-text-primary);

    &::placeholder {
        font-size: 14px !important;
    }
}

.el-input-group__append {
    border-left: 0;
}

.el-tooltip__popper {
    font-size: 12px;
    color: var(--theme-text-inverse) !important;
}

/* 确保 el-table 的 tooltip 文字颜色正确 */
.el-tooltip__popper .el-tooltip__content,
.el-tooltip__popper span,
.el-tooltip__popper div {
    color: var(--theme-text-inverse) !important;
}

/* 更高优先级的 tooltip 样式覆盖 */
.el-table .el-tooltip__popper,
.el-table .el-tooltip__popper *,
.el-popper[data-popper-placement] {
    color: var(--theme-text-inverse) !important;
}

/* 针对 Element Plus 的 tooltip 内容 */
.el-popper.is-dark .el-tooltip__content,
.el-popper.is-light .el-tooltip__content,
.el-tooltip__popper.is-dark,
.el-tooltip__popper.is-light {
    color: var(--theme-text-inverse) !important;
}

.message-tooltip .el-tooltip__popper span {
    color: var(--theme-text-primary) !important;
}

.expand-panel-tooltip {
    span {
        color: var(--theme-text-primary) !important;
    }
}

.el-table__empty-text {
    font-size: 14px;
    color: $color-text-placeholder;
}

.el-loading-mask {
    z-index: 4;
    background-color: var(--theme-loading-mask-bg) !important;
}

.el-dropdown-menu__item {
    font-size: 14px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 16px !important;
}

.table-form-item {
    margin-bottom: 20px;

    .el-input {
        .el-input__inner {
            font-size: 14px !important;

            &::placeholder {
                font-size: 14px !important;
            }
        }
    }

    .el-form-item__error {
        padding-top: 5px;
        font-size: 12px !important;
    }
}

.el-input {
    .el-input__icon {
        font-size: 14px;
    }
}

.el-cascader__dropdown {
    .el-cascader-node__label,
    .el-icon-arrow-right {
        font-size: 13px;
        font-family: Microsoft YaHei,
        Microsoft YaHei,
        serif;
    }
}

.el-cascader {
    .el-tag {
        background-color: var(--theme-box-color-1);

        span {
            color: var(--theme-cascader-text-color);
        }

        span,
        .el-tag__close {
            font-size: 13px;
        }
    }
}

//.el-select__placeholder {
//    color: var(--theme-select-placeholder-color) !important;
//}

.el-select__placeholder.is-transparent {
    color: #a8abb2 !important;
}

.el-table td.el-table__cell div {
    font-size: 14px;
}

.el-table {
    --el-table-border-color: var(--theme-border-tertiary) !important;
    // border: 1px solid var(--theme-border-tertiary) !important;
    background-color: var(--theme-system-module-3) !important;

    &::after,
    &::before {
        width: 0;
    }

    .el-table__header-wrapper {
        .el-table__header {
            .el-table__cell {
                padding: 12px 0 !important;
                background-color: var(--theme-table-cell-bg) !important;
                border-color: var(--theme-system-module-3) !important;
                border-bottom: 1px solid var(--theme-border-tertiary) !important;

                &.is-required {
                    .cell {
                        &::before {
                            content: '*';
                            display: inline-block;
                            color: var(--theme-danger);
                            margin-right: 3px;
                            font-size: 11px;
                            vertical-align: top;
                        }
                    }
                }

                .cell {
                    font-size: 15px;
                    color: var(--theme-text-primary);
                    font-weight: 700;
                    font-family: PingFang SC-Medium,
                    PingFang SC,
                    serif;
                    white-space: nowrap;
                }
            }
        }
    }

    .el-table__body-wrapper {
        /* 滚动条整体 */
        &::-webkit-scrollbar {
            width: 8px !important;
        }

        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
            background: var(--theme-success);
        }

        /* 滚动条轨道 */
        &::-webkit-scrollbar-track {
            color: transparent;
            border-radius: 0;
            background: var(--theme-system-module-3) !important;
        }

        .el-table__row {
            .el-table__cell {
                background-color: var(--theme-table-row-cell-bg);
                border: 0;
                border-bottom: 1px solid var(--theme-system-module-3);
                color: var(--theme-system-table-text);
            }

            &:hover {
                .el-table__cell {
                    background-color: var(--theme-system-module-4) !important;
                }
            }
        }

        .el-table__row--striped {
            .el-table__cell {
                background-color: var(--theme-table-striped-bg) !important;
            }
        }
    }
}

// 修改整体输入框样式及其组件样式
.el-submenu__title i,
.el-tree-node,
.form-table > tbody > tr > th {
    color: var(--theme-text-primary) !important;
}

.el-table th > .cell,
.el-date-picker__header-label,
.el-date-table th,
.has-gutter tr th > .cell,
.el-table__column-filter-trigger i,
.el-collapse-item__header,
.el-card,
.el-range-editor .el-range-input,
.el-range-separator,
.record-container > span[data-v-452e030f],
.el-popover.el-popper,
.action-container > span[data-v-1e8bb8cd],
.form-container > span[data-v-35213a62] {
    color: var(--theme-text-inverse) !important;
}

.el-input .el-input__inner,
.el-select .el-input__inner,
.el-textarea .el-textarea__inner,
.el-form-item__content .el-range-editor--small.el-input__inner,
.el-range-editor .el-range-input,
.content_top_wrap_form .form_date_picker,
.el-date-editor--monthrange.el-input,
.el-date-editor--monthrange.el-input__inner {
    background-color: var(--theme-system-input-bgColor);
    color: var(--theme-text-primary);
}

.el-select .el-select__input {
    color: var(--theme-text-primary);
}

.is-disabled {
    .el-input__inner {
        background-color: var(--theme-system-disabled-bg) !important;
        border: 1px solid $system-border-color3 !important;
        color: $color-white;

        &:hover {
            border-color: $system-border-color3 !important;
        }
    }

    .el-checkbox__inner {
        background-color: var(--theme-system-module-3) !important;
        border: 1px solid $system-border-color3 !important;
        color: $color-white;

        &:hover {
            border-color: $system-border-color3 !important;
        }
    }
}

.el-range-editor.el-input__inner {
    background-color: var(--theme-system-input-bg);
    border: 1px solid $system-border-color3;

    &.is-disabled {
        background-color: var(--theme-system-disabled-bg) !important;
        border: 1px solid $system-border-color3 !important;
        color: $color-white;

        i,
        .el-range-separator {
            color: $color-text-placeholder !important;
        }

        .el-range-input {
            color: $color-text-placeholder !important;
            background-color: var(--theme-system-disabled-bg) !important;
        }

        &:hover {
            border-color: $system-border-color3 !important;
        }
    }
}

.el-card.is-always-shadow,
.el-collapse-item .el-collapse-item__header,
.el-tabs__content .el-table--border,
.el-range-input,
.el-input-number.is-controls-right[class*='small'] [class*='decrease'],
.el-popper {
    border: none !important;
}

.el-input {
    background: transparent;

    &.el-click-input {
        .el-input-group__append,
        .el-input-group__prepend,
        .el-input__inner {
            cursor: pointer !important;
        }
    }

    .el-input-group__append,
    .el-input-group__prepend {
        background-color: var(--theme-input-group-bg);
        color: var(--theme-input-group-text);
        border: 1px solid var(--theme-input-group-border);
        transition: all 0.3s;
        font-size: 14px;
    }

    .el-input-group__prepend {
        border-right: 0;
    }

    .el-input-group__append {
        border-left: 0;
    }

    &.el-input-group--append,
    &.el-input-group--prepend {
        .el-input__inner {
            &:hover {
                border-color: $system-border-color3 !important;
            }
        }

        &:hover {
            .el-input-group__append,
            .el-input-group__prepend,
            .el-input__inner {
                border-color: $system-border-color1 !important;
            }
        }
    }
}

.el-input__inner:hover,
.el-textarea__inner:hover,
.el-select:hover {
    border-color: $system-border-color1 !important;
}

.el-form-item__content .el-upload--picture-card {
    background-color: var(--theme-system-module-1);
    border: 1px dashed #1a4a72;
}

.el-select-dropdown {
    background: var(--theme-system-module-2);

    .el-scrollbar {
        background: transparent;
        border-radius: 5px;
        // border: 1px solid $system-border-color1 !important;

        .el-scrollbar__view {
            background: transparent;

            .el-select-dropdown__item {
                background: var(--theme-system-module-2);

                span {
                    color: var(--theme-text-primary);
                }

                &.hover {
                    background: var(--theme-system-active-bg);
                }

                &.selected {
                    span {
                        color: var(--theme-primary);
                    }
                }
            }
        }
    }

    .el-select-dropdown__empty {
        color: $color-text-placeholder;
        border: 1px solid $system-border-color2 !important;
        border-radius: 5px;
        overflow: hidden;
    }
}

.el-picker-panel {
    border: 1px solid $system-border-color1 !important;
    background: $system-module-color2;
    border-radius: 5px;
    box-sizing: border-box;

    .el-picker-panel__body-wrapper {
        background-color: transparent;

        .el-picker-panel__body {
            .el-date-range-picker__time-header {
                border-bottom: 1px solid $system-border-color2;

                .el-icon-arrow-right {
                    color: $color-white;
                }

                .el-input__inner {
                    font-size: 14px;

                    &::placeholder {
                        font-size: 14px;
                    }
                }
            }

            .el-date-picker__header {
                border-bottom: 1px solid $system-border-color2;

                .el-picker-panel__icon-btn {
                    color: var(--theme-text-primary);

                    &:hover {
                        color: var(--theme-system-hover-active-text);
                    }
                }
            }

            .el-date-picker__time-header {
                border-bottom: 1px solid $system-border-color2;
            }

            .el-picker-panel__content {
                &.is-left {
                    border-right: 1px solid $system-border-color2;
                }

                &.is-right {
                }

                .el-date-range-picker__header {
                    * {
                        color: var(--theme-text-primary);
                    }

                    button {
                        &:hover {
                            color: var(--theme-system-hover-active-text);
                        }
                    }
                }

                .el-date-table {
                    tbody {
                        * {
                            font-size: 12px;
                        }

                        tr {
                            &:first-child {
                                th {
                                    border-bottom-color: $system-border-color2;
                                }
                            }
                        }

                        .el-date-table__row {
                            td {
                                &.disabled {
                                    div {
                                        background-color: var(--theme-system-disabled-bg);
                                    }
                                }

                                &.available {
                                    div {
                                        span {
                                            color: var(--theme-text-primary);
                                        }
                                    }

                                    &.in-range {
                                        div {
                                            background-color: var(--theme-system-active-bg);
                                        }
                                    }

                                    &.start-date,
                                    &.end-date,
                                    &.current {
                                        div {
                                            span {
                                                background-color: var(--theme-system-hover-active-text);
                                                color: $color-white !important;
                                            }
                                        }
                                    }

                                    &.today {
                                        div {
                                            span {
                                                font-weight: bold;
                                                color: var(--theme-system-hover-active-text);
                                            }
                                        }
                                    }

                                    &:not(.start-date):not(.end-date):not(.current) {
                                        &:hover {
                                            div {
                                                span {
                                                    color: var(--theme-system-hover-active-text);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .el-month-table {
                    tbody {
                        tr {
                            td {
                                .cell {
                                    color: $color-white;

                                    &:hover {
                                        color: var(--theme-system-hover-active-text);
                                    }
                                }

                                &.current .cell {
                                    color: var(--theme-system-hover-active-text);
                                }

                                &.today .cell {
                                    font-weight: bold;
                                    color: var(--theme-system-hover-active-text);
                                }

                                &.current.today .cell {
                                    color: $color-white;
                                }
                            }
                        }
                    }
                }

                .el-year-table {
                    tbody {
                        * {
                            font-size: 14px;
                        }

                        tr {
                            td {
                                &.available {
                                    .cell {
                                        color: $color-white;
                                    }

                                    &.current {
                                        .cell {
                                            color: var(--theme-system-hover-active-text);
                                        }
                                    }

                                    &.today {
                                        .cell {
                                            font-weight: bold;
                                            color: var(--theme-system-hover-active-text);
                                        }
                                    }

                                    &.current.today {
                                        .cell {
                                            color: $color-white;
                                        }
                                    }

                                    &:hover {
                                        .cell {
                                            color: var(--theme-system-hover-active-text);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .el-picker-panel__footer {
        background-color: transparent;
        border-top: 1px solid $system-border-color2;
    }

    .popper__arrow {
    }
}

.el-time-panel {
    background: $system-module-color2;
    border: 1px solid $system-border-color1 !important;
    border-radius: 5px;

    * {
        border-color: $system-border-color2;
    }

    .el-time-panel__content {
        &::after,
        &::before {
            border-color: $system-border-color2;
        }

        .el-time-spinner__item {
            color: var(--theme-text-primary);

            &:hover {
                background-color: $system-active-bgColor;
            }

            &.active {
                color: var(--theme-system-hover-active-text);
                background-color: transparent;
            }
        }
    }

    .el-time-panel__footer {
        .cancel {
            color: $color-white;
        }
    }
}

.el-dropdown-menu {
    background: $system-module-color2;
    border: 1px solid $system-border-color1 !important;
    border-radius: 5px;

    .el-dropdown-menu__item {
        color: var(--theme-text-inverse);

        &:hover {
            color: var(--theme-system-hover-active-text);
            background-color: $system-active-bgColor;
        }
    }
}

.el-dropdown {
    .el-button-group {
        .el-button {
            background-color: var(--theme-system-input-bg);
            border: 1px solid var(--theme-border-secondary);
            color: var(--theme-text-primary);

            &.el-dropdown__caret-button {
                border-left: 0;

                &::before {
                    background-color: $system-border-color2;
                }
            }

            &:hover {
                color: var(--theme-system-hover-active-text);
                border-color: $system-border-color1;
            }
        }
    }
}

.el-checkbox {
    .el-checkbox__input {
        .el-checkbox__inner {
            background-color: var(--theme-system-module-3);
            border: 1px solid $system-border-color2;

            &:hover {
                border-color: $system-border-color1;
            }
        }

        &.is-checked,
        &.is-indeterminate {
            .el-checkbox__inner {
                border-color: $system-border-color1;
                background-color: $system-border-color1;
            }
        }
    }

    .el-checkbox__label {
        color: var(--theme-text-primary);

        span {
            color: var(--theme-text-primary);
        }
    }

    &.is-disabled {
        .el-checkbox__label {
            color: var(--theme-text-placeholder);

            span {
                color: var(--theme-text-placeholder);
            }
        }

        &:hover {
            border-color: var(--theme-system-disabled-bg);
        }
    }

    &.is-checked {
        .el-checkbox__label {
            color: var(--theme-system-hover-active-text);

            span {
                color: var(--theme-system-hover-active-text);
            }
        }
    }

    &.is-bordered {
        border-color: $system-border-color2;

        &:hover {
            border-color: $system-border-color1;
        }
    }

    &.is-bordered.is-checked {
        border-color: $system-border-color1;
        background-color: var(--theme-box-color-3);

        .el-checkbox__label {
            color: var(--theme-system-hover-active-text);

            span {
                color: var(--theme-system-hover-active-text);
            }
        }
    }

    &.is-bordered.is-disabled.is-checked {
        border-color: var(--theme-system-disabled-bg);
        background-color: var(--theme-system-disabled-bg);

        .el-checkbox__label {
            color: $color-text-placeholder;

            span {
                color: $color-text-placeholder;
            }
        }

        &:hover {
            border-color: var(--theme-system-disabled-bg);
        }
    }
}

.el-radio {
    .el-radio__input {
        .el-radio__inner {
            background-color: var(--theme-radio-bg);
            border: 1px solid $system-border-color2;

            &:hover {
                border-color: $system-border-color1;
            }
        }

        &.is-checked {
            .el-radio__inner {
                border-color: $system-border-color1;
                background-color: $system-border-color1;
            }
        }
    }

    .el-radio__label {
        // color: $color-white;
        color: var(--theme-text-inverse);

        span {
            // color: $color-white;
            color: var(--theme-text-inverse);
        }
    }

    &.is-disabled {
        .el-radio__input {
            .el-radio__inner {
                background-color: var(--theme-system-disabled-bg);
                border: 1px solid $system-border-color2;

                &:hover {
                    border-color: $system-border-color2;
                }
            }
        }

        .el-radio__label {
            color: $color-text-placeholder;

            span {
                color: $color-text-placeholder;
            }
        }

        &:hover {
            border-color: var(--theme-system-disabled-bg);
        }
    }

    &.is-checked {
        .el-radio__label {
            color: var(--theme-system-hover-active-text);

            span {
                color: var(--theme-system-hover-active-text);
            }
        }
    }
}

.el-tabs {
    .el-tabs__header {
        .el-tabs__nav-scroll {
            .el-tabs__item {
                color: $color-white;

                &.is-active {
                    color: var(--theme-system-hover-active-text);
                    font-weight: 700;
                }
            }
        }
    }
}

.el-upload__tip {
    color: $color-text-placeholder;
}

.el-upload-list {
    .el-upload-list__item {
        &:hover {
            background-color: var(--theme-box-color-3);

            .el-upload-list__item-name {
                color: var(--theme-system-hover-active-text);
            }
        }

        .el-upload-list__item-name {
            color: $color-text-placeholder;

            i {
                color: $color-text-placeholder;
            }
        }

        .el-icon-close {
            color: $color-text-placeholder;

            &:hover {
                color: $color-danger;
            }
        }
    }
}

.el-dialog__wrapper {
    background-color: rgba($color-black, 0.5);
}

.el-message {
    .el-message__icon {
        font-size: 18px !important;
    }

    &.el-message--info {
        background-color: #1a3d5c !important;
        border-color: #2a5d8c !important;
    }

    &.el-message--success {
        background-color: #1a4d2c !important;
        border-color: #2a6d4c !important;
    }

    &.el-message--warning {
        background-color: #4d3d1a !important;
        border-color: #6d5d2a !important;
    }

    &.el-message--error {
        background-color: #4d1a1a !important;
        border-color: #6d2a2a !important;
    }
}

.el-popover.el-popper {
    background-color: var(--theme-system-module-1) !important;
    border: 1px solid $system-border-color1 !important;
}

.el-popper,
.el-popper > .el-popper__arrow:before {
    background-color: var(--theme-system-module-1) !important;
    border: 1px solid $system-border-color1 !important;
}

// .el-switch {
//     .el-switch__core {
//         border-color: var(--theme-switch-border-color);
//         background-color: var(--theme-switch-bg-color);
//     }
// } 禁用默认样式底色，使用自定义样式

.el-result {
    .el-result__title {
        p {
            color: $color-text-placeholder;
        }
    }
}

.el-backtop {
    right: 4vw !important;
    bottom: 180px !important;
    width: 60px;
    height: 60px;

    .top-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        background-color: var(--theme-box-color-2);
        text-align: center;
        color: $color-text-placeholder;
        transition: all 0.15s;
        box-shadow: 0 0 6px var(--theme-system-disabled-bg);
        border-radius: 20%;
        font-size: 24px;
        user-select: none;

        &:hover {
            color: var(--theme-system-hover-active-text);
            background-color: var(--theme-box-color-2);
        }
    }
}

.el-drawer__wrapper {
    &.el-drawer-fade-enter-active {
        animation: el-drawer-fade-in 0.2s;
    }

    &.el-drawer-fade-leave-active {
        animation: el-drawer-fade-in 0.1s reverse;
    }

    .el-drawer__container {
        &.el-drawer__open {
            .rtl {
                animation: rtl-drawer-in 0.4s 2ms;
            }
        }

        .el-drawer {
            box-shadow: 4px 0 10px 0 rgba(53, 152, 220, 0.1);
            border-left: 1px solid $system-border-color2;
            background-color: var(--theme-system-bg);

            .el-drawer__body {
                overflow: hidden;
                height: 100%;
            }
        }
    }
}

.el-cascader__dropdown {
    border-radius: 4px;
    border: 0;

    .el-cascader-panel {
        overflow: hidden;
        border: 1px solid $system-border-color1;

        .el-cascader-menu {
            background-color: var(--theme-system-module-1);

            .el-cascader-menu__list {
                .el-cascader-node {
                    .el-cascader-node__label,
                    .el-icon-arrow-right {
                        color: var(--theme-cascader-text-color);
                    }

                    &.is-active {
                        .el-cascader-node__label,
                        .el-icon-arrow-right {
                            color: var(--theme-system-hover-active-text);
                        }
                    }

                    &:hover,
                    &:focus {
                        background-color: var(--theme-box-color-3);
                    }

                    &.in-active-path {
                        .el-cascader-node__label {
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}

.el-message-box {
    background: var(--theme-system-bg);
    border-color: $system-border-color3;

    .el-message-box__title {
        // color: var(--theme-message-box-title);
        color: #000000
    }

    .el-message-box__message {
        // color: var(--theme-text-inverse);
        color: #000000
    }
}

.el-descriptions {
    .el-descriptions__body {
        background-color: var(--theme-system-module-1);

        .el-descriptions-row {
            .el-descriptions-item__cell {
                padding: 15px 10px;
                border-color: $system-border-color2;
                color: $system-table-text-color;

                &.el-descriptions-item__label {
                    min-width: 10%;
                    font-family: PingFang SC-Medium,
                    PingFang SC,
                    serif;
                    font-size: 15px;
                    background-color: $system-module-color3;
                    color: $color-white;
                }

                &.el-descriptions-item__content {
                    font-size: 15px;

                    > * {
                        font-size: 15px;
                    }

                    .text-ellipsis {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 1;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                    }

                    .high-item {
                        display: flex;
                        min-height: 340px;
                        align-items: center;
                    }
                }
            }
        }
    }
}

.el-progress {
    &.is-success {
        .el-progress__text {
            color: $color-success !important;
        }
    }

    &.is-warning {
        .el-progress__text {
            color: $color-warning !important;
        }
    }

    &.is-exception {
        .el-progress__text {
            color: $color-danger !important;
        }
    }

    .el-progress__text {
        color: $color-primary !important;
    }
}

.el-select {
    .el-select__tags {
        .el-tag {
            background: var(--theme-box-color-1);
            color: $color-white;
            border: 1px solid $system-border-color3;
        }
    }
}

.el-form {
    .el-form-item {
        .el-form-item__label {
            color: var(--theme-form-label);
        }

        .el-form-item__content {
            .el-select {
                width: 100%;
            }

            .el-input-number .el-input__inner {
                text-align: left;
            }

            .el-date-editor.el-input,
            .el-date-editor.el-input__inner {
                width: 100%;
            }
        }
    }
}

.el-card {
    background-color: var(--theme-system-module-1);
}

.el-scrollbar__thumb {
    background-color: $system-border-color6;
}

.el-popper {
    background: $system-module-color2;
}

.el-table__fixed {
    tr {
        background-color: var(--theme-system-module-1);
    }
}

.el-table {
    color: $system-table-text-color;

    tr {
        background-color: var(--theme-system-module-1);
    }
}

.el-table td.el-table__cell {
    border-bottom: 1px solid $system-module-color3;
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: var(--theme-system-module-1);
}

.el-table--border .el-table__cell {
    border-right: 1px solid transparent;
}

.el-table__fixed::before,
.el-table__fixed-right::before {
    background-color: transparent;
}

.el-table th.el-table__cell {
    background-color: $system-module-color3;

    .cell {
        font-size: 15px;
        color: $color-white;
        font-weight: 700;
        font-family: PingFang SC-Medium,
        PingFang SC,
        serif;
        white-space: nowrap;
    }
}

.el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid $system-border-color3 !important;
}

.el-table__body tr.hover-row > td.el-table__cell {
    background-color: var(--theme-box-color-5) !important;
}

.el-message-box__message p {
    font-size: 16px !important;
}

.el-checkbox.el-checkbox--large {
    height: 24px !important;
}

.el-tabs__nav-wrap:after {
    background-color: $system-border-color3 !important;
}

.el-tree {
    background-color: transparent !important;
}

.el-input-number__increase {
    background-color: var(--theme-system-module-1) !important;
    border: none !important;

    i {
        color: #7fbfff;
    }
}

.el-input-number__decrease {
    background-color: var(--theme-system-module-1) !important;
    border: none !important;

    i {
        color: #7fbfff;
    }
}

.el-collapse-item__content {
    padding-bottom: 0px;
}

.el-collapse-item__wrap {
    border: none;
}

.el-collapse-item__header {
    height: 60px;
    line-height: 60px;
    padding-right: 8px;
}

.el-descriptions__label.el-descriptions__cell.is-bordered-label {
    background-color: transparent !important;
    color: var(--theme-text-inverse) !important;
}

.el-descriptions {
    --el-descriptions-table-border: 1px solid var(--theme-border-descriptions) !important;

    .el-form-item {
        margin-bottom: 0px !important;
    }
}

.el-descriptions--large
.el-descriptions__body
.el-descriptions__table.is-bordered
.el-descriptions__cell {
    padding: 16px !important;
}

.el-descriptions__body
.el-descriptions__table.is-bordered
.el-descriptions__cell {
    padding: 16px !important;
}

.el-collapse-item__header {
    background-color: var(--theme-collapse-header-bg) !important;
    color: var(--theme-text-inverse) !important;
    height: 60px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}

.el-collapse {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.el-collapse-item__content {
    padding: 0px !important;
}

.el-collapse-item__wrap {
    border-bottom: 1px solid var(--theme-collapse-wrap-border) !important;
}

.el-input-group__append {
    border-left: 0;
    box-shadow: none !important;
}

.is-disabled .el-input__inner,
.is-disabled .el-checkbox__inner {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: #f0f0f0;
}

.el-picker-panel {
    background: var(--theme-system-module-1) !important;
}

.el-collapse-item__header {
    padding-right: 20px !important;
}

.el-radio.is-bordered {
    border: 1px solid $system-border-color3 !important;
}

.el-radio.is-bordered.is-checked {
    border-color: var(--el-color-primary) !important;
}

.el-cascader-menu {
    border-right-color: var(--el-color-primary) !important;
}

.el-cascader-node.in-active-path {
    .el-cascader-node__postfix {
        color: $color-primary !important;
    }
}

.el-cascader-node {
    .el-cascader-node__postfix {
        color: var(--theme-cascader-text-color) !important;
    }
}

.el-radio-button .el-radio-button__inner {
    background-color: var(--theme-system-module-1);
    border-color: $system-border-color3;
    color: var(--theme-text-inverse);
}

.el-radio-button:first-child .el-radio-button__inner {
    border-color: $system-border-color3 !important;
}

.el-picker-panel__footer {
    .el-button.is-text {
        color: var(--theme-primary) !important;
    }
}

.el-descriptions__label {
    width: 210px !important;
    min-width: 210px !important;
}

.el-descriptions__content {
    max-width: 450px;
    width: 450px;
    word-break: break-word;
    background-color: var(--theme-form-content-bg);
}

.el-dropdown-menu {
    background-color: var(--theme-system-module-1) !important;
    border: none !important;
}

.el-dropdown-menu__item:not(.is-disabled):focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: var(--theme-system-bg) !important;
}

.el-picker-panel .el-time-panel {
    background-color: var(--theme-system-bg) !important;
}

.el-time-spinner__item.is-active:not(.is-disabled) {
    color: $color-primary !important;
}

.el-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
    background-color: var(--theme-system-module-4) !important;
}

.el-time-panel__footer {
    border-top: 1px solid $system-border-color2 !important;
}

.el-select__selected-item {
    .el-tag.el-tag--info {
        color: $color-white !important;
    }

    .el-tag.el-tag--info {
        --el-tag-bg-color: var(--theme-tag-info-bg);
    }

    .el-tag .el-tag__close {
        color: $color-white !important;
    }

    .el-tag .el-tag__close:hover {
        background-color: #234e71;
    }
}

.el-select-dropdown .el-scrollbar .el-scrollbar__view .el-select-dropdown__item.is-selected span {
    color: $color-primary;
}

.el-tooltip__trigger:first-child:focus-visible {
    outline: unset;
}

.el-table__footer-wrapper tfoot td.el-table__cell {
    background-color: $system-module-color4;
    color: #fff;
    font-weight: bold;
}

.el-card {
    background-color: var(--theme-system-module-1) !important;
}

// Divider 分割线文本样式
.el-divider__text {
    background-color: var(--theme-divider-text-bg) !important;
}
