.vm-table {
    --table-bg: white;
    --table-header-bg-color: #ecf6ff;
    --table-color: #222;
    --table-head-color: #222;
    --table-row-border: 1px solid #f0f0f0;
    --table-row-bg-color: #fafafa;
    --scroll-bar-hover-bg: #adadad;

    &.blue {
        --table-bg: transparent;
        --table-header-bg-color: rgba(14, 156, 255, 0.1);
        --table-color: white;
        --table-head-color: #fff;
        --table-row-border: 1px solid transparent;
        --table-row-bg-color: rgba(106, 228, 255, 0.01);
        --scroll-bar-hover-bg: #219fff3d;
        --page-a-color: #fff;
        --page-a-active-color: #0dbafe;
        --page-a-bg: linear-gradient(0deg, #2a55e9, #0dbafe);
        --page-border-color: #d9d9d9;
        --page-border-active-color: #0dbafe;
        .ant-pagination {
            color: white;
            .ant-pagination-item {
                background-color: transparent;
                border-color: rgba(255, 255, 255, 0.6);
                > a {
                    color: white;
                }

                &.ant-pagination-item-active,
                &:hover {
                    border-color: #018aff;
                    > a {
                        color: #018aff;
                    }
                }
            }
            .ant-select-arrow {
                color: white;
            }
            .ant-pagination-total-text {
                color: #fff;
            }
            .ant-pagination-item-link {
                color: white;
                background-color: transparent;
                border-color: rgba(255, 255, 255, 0.4);
                &:hover :not(:disabled) {
                    color: #95fff9;
                    border-color: #95fff9;
                }
            }
            .ant-select-dropdown {
                background: #0d1a1b;
                .ant-select-item {
                    color: white;
                }
                .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
                    background-color: #2d575a;
                }
                .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
                    background-color: #1c3436;
                }
            }
            .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis {
                color: #ffffff40;
            }
            .ant-pagination-options-quick-jumper input {
                color: white;
                background: transparent;
                border: 1px solid #3c7073;
                &:hover {
                    border: 1px solid #6cc9ce;
                }
            }
            .ant-select:not(.ant-select-customize-input) .ant-select-selector {
                background-color: transparent;
                border: 1px solid #1464a6;
            }
            .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
                border: 1px solid #6cc9ce;
            }
            .ant-select {
                color: white;
            }
        }
    }
    &.dark {
        --table-bg: transparent;
        --table-header-bg-color: #00adb11a;
        --table-color: white;
        --table-head-color: #d3fff9ff;
        --table-row-border: 1px solid transparent;
        --table-row-bg-color: #ffffff0d;
        --scroll-bar-hover-bg: #39cbc3ff;

        .ant-pagination {
            color: white;
            .ant-pagination-item {
                background-color: transparent;
                border-color: #454847;
                > a {
                    color: white;
                }

                &.ant-pagination-item-active,
                &:hover {
                    border-color: #95fff9;
                    > a {
                        color: #95fff9;
                    }
                }
            }
            .ant-select-arrow {
                color: white;
            }
            .ant-pagination-item-link {
                color: white;
                background-color: transparent;
                border-color: #454847;
                &:hover :not(:disabled) {
                    color: #95fff9;
                    border-color: #95fff9;
                }
            }
            .ant-select-dropdown {
                background: #0d1a1b;
                .ant-select-item {
                    color: white;
                }
                .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
                    background-color: #2d575a;
                }
                .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
                    background-color: #1c3436;
                }
            }
            .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis {
                color: #ffffff40;
            }
            .ant-pagination-options-quick-jumper input {
                color: white;
                background: transparent;
                border: 1px solid #3c7073;
                &:hover {
                    border: 1px solid #6cc9ce;
                }
            }
            .ant-select:not(.ant-select-customize-input) .ant-select-selector {
                background-color: transparent;
                border: 1px solid #3c7073;
            }
            .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
                border: 1px solid #6cc9ce;
            }
            .ant-select {
                color: white;
            }
        }
    }

    .ant-table-body {
        // ScrollBar
        &::-webkit-scrollbar {
            width: 0px;
            height: 4px;
        }

        // &::-webkit-scrollbar-track {
        //     background: var(--scroll-bar-hover-bg);
        //     border-radius: 5px;
        // }

        &::-webkit-scrollbar-thumb {
            background: var(--scroll-bar-hover-bg);
            border-radius: 5px;
        }

        // &::-webkit-scrollbar-corner {
        //     background: var(--scroll-bar-hover-bg);
        // }

        // &::-webkit-scrollbar-thumb:hover {
        //     background: var(--scroll-bar-hover-bg);
        // }
    }

    .ant-table {
        background: var(--table-bg);
        .vm-table-row {
            background: #2d575a;
        }

        .ant-table-container {
            &::before {
                display: none;
            }

            &::after {
                display: none;
            }

            .ant-table-content {
                padding-bottom: 10px;
            }
            table {
                border-collapse: collapse;

                thead {
                    th {
                        padding: 8px 12px;
                        color: var(--table-head-color);
                        white-space: no-wrap;
                        background-color: var(--table-header-bg-color);
                        border: none;

                        &::before {
                            display: none;
                        }
                    }
                }

                tbody {
                    tr {
                        td {
                            padding: 8px 12px;
                            color: var(--table-color);
                            white-space: nowrap;
                            // background-color: transparent;
                            border: none;
                        }

                        &:nth-child(odd) {
                            td {
                                background-color: var(--table-row-bg-color);
                                border-top: var(--table-row-border);
                                border-bottom: var(--table-row-border);

                                &:first-child {
                                    border-left: var(--table-row-border);
                                }

                                &:last-child {
                                    border-right: var(--table-row-border);
                                }
                            }
                        }
                    }

                    .ant-table-placeholder {
                        .ant-empty-description {
                            color: var(--title-color);
                        }
                    }
                }
            }
        }
    }
}

.vtx-export-btn {
    &.dark {
        background: #2bd8cf;
        border-color: #2bd8cf;
        > span {
            color: black;
        }
    }
}
.vtx-export-dropdown {
    &.dark {
        .ant-dropdown-menu {
            background-color: #0d1a1b;
            .ant-dropdown-menu-item {
                color: white;
                &:hover {
                    background-color: #1c3436;
                }
            }
        }
    }
    &.blue {
        .ant-dropdown-menu {
            background-color: #1a3e69;
            .ant-dropdown-menu-item {
                color: white;
                &:hover {
                    background-color: RGBA(30, 92, 147, 0.5);
                }
            }
        }
    }
}
.vtx-table-tabs {
    &.dark {
        .ant-tabs-nav {
            &::before {
                border-bottom: 1px solid #ffffff1a;
            }
        }
        .ant-tabs-tab-btn {
            color: #c5c5c5ff;
        }
        .ant-tabs-ink-bar {
            background-color: #95fff9;
        }
        .ant-tabs-tab-active {
            .ant-tabs-tab-btn {
                color: #95fff9 !important;
            }
        }
    }
}
