.vm-table {
  --table-bg: white;
  --table-color: #1f1f1f;
  --table-header-bg-color: #e6f4ff;
  --table-header-fixed-bg-color: #e6f4ff;
  --table-bd-fixed-bg-color: #fff;
  --table-bd-fixed-bg-odd-color: #e8e8e8;
  --table-row-border: 1px solid #f2f2f2;
  --table-row-bg-color: #f2f2f2;
  --scroll-bar-hover-bg: #adadad;

  &.dark {
    --table-bg: transparent;
    --table-color: #fff;
    --table-header-bg-color: rgba(0, 157, 255, 0.2);
    --table-header-fixed-bg-color: rgb(13 92 142);
    --table-bd-fixed-bg-color: #155279;
    --table-bd-fixed-bg-odd-color: #115d8e;
    --table-row-border: 1px solid transparent;
    --table-row-bg-color: rgba(0, 91, 136, 0.1);
    --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;
      }
    }
  }

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

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

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

    // &::-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);
    scrollbar-color: inherit;
    .vm-table-row {
      background: #2d575a;
    }
    .ant-table-thead {
      .ant-table-cell-fix-left,
      .ant-table-cell-fix-right,
      th.ant-table-cell-fix {
        background: var(--table-header-fixed-bg-color) !important;
      }
    }

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

      &::after {
        display: none;
      }

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

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

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

        tbody {
          .ant-table-cell-fix-left,
          .ant-table-cell-fix-right,
          .ant-table-cell-fix {
            background: var(--table-bd-fixed-bg-color) !important;
          }
          tr {
            td {
              padding: 12px;
              color: var(--table-color);
              white-space: nowrap;
              // background-color: transparent;
              border: none;
              background: var(--table-bg) !important;
            }
            &:hover {
              background-color: var(--scroll-bar-hover-bg);

              td {
                background-color: var(--scroll-bar-hover-bg) !important;
              }
            }

            &:nth-child(odd) {
              td,
              td.ant-table-cell-fix-left,
              th.ant-table-cell-fix-start {
                // background-color: var(--table-row-bg-color) !important;
                background-color: var(--table-bd-fixed-bg-odd-color) !important;
                // 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 {
            background: var(--table-bg) !important;
            .ant-empty-description {
              color: var(--modal-title-color);
            }
          }
        }
      }
    }
    td.ant-table-column-sort {
      background: transparent;
    }
  }
}

.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);
        }
      }
    }
  }
}
