@import "./_dark-theme-variables.scss";
@import "./antd-dark-theme.scss";
@import "./cm2-dark-theme.scss";

html[data-theme="dark"] {

  color: $text-color;
  background-color: $background-color;

  a {
    color: $dark-link-color;

    &:hover {
        color: $dark-link-hover;
    }
  }

  .app {
    &.ocr-overlay {
      background-color: $background-color;
    }

    .backup-alert {
      background: $dark-app-alert-background;
    }
  }

  .header {
    background: $dark-app-alert-background;
  }

  .sidebar .resize-handler {
    background-color: $border-color;
  }

  .macro-table-container {
    #context_menu {
      border: 0px
    }
  }

  .file-root .file-node.error > .tree-node-content {
    background: #784646;
  }

  .command-row {         
    &:hover {
      background: #4f5c62;
    }

    &.selected-command {
      background: #424234 !important;

      &.selected-command {
        background: #4242348a !important;
      }
    }

    &.running-command {
      background: #575880 !important;

      &.selected-command {
        background: #4242348a !important;
      }
    }

    &.error-command {
      background: #dab7b7 !important;

      &.selected-command {
        background: #4242348a !important;
      }
    }

    &.done-command {
      background: #94b799 !important;

      &.selected-command {
        background: #4242348a !important;
      }
    }

    &.comment-command {
      background: #8b8b8b !important;
    }
  }

  .dashboard #context_menu .ant-menu .ant-menu-item:hover {
    background: gray;
  }

  .dashboard .commands-view .command-row {
    border-bottom: 1px solid #e9e9e959;
  }

  .dashboard .logs-screenshots .log-content li {
    border-bottom: 1px solid #5c5c5c;
  }

  .ant-select-selection-placeholder {
    color: $text-color-disabled;
  }

  .ant-select-open {
    color: $text-color;
  }

  .ant-select-open .ant-select-selection-item {
    color: $text-color;
  }

  .ant-select-single.ant-select-sm.ant-select-open .ant-select-selection-item {
    color: $text-color;
  }

  .ant-select-single.ant-select-sm.ant-select-show-arrow
    .ant-select-selection-item,
  .ant-select-single.ant-select-sm.ant-select-show-arrow
    .ant-select-selection-placeholder {
    color: $text-color;
  }

  .ant-input-search .ant-input-group .ant-input-affix-wrapper {
    background-color: $background-color;
    border-color: $dark-border;
  }

  .dashboard .commands-view .ant-tabs-content {
    border-color: $border-color;
  }

  .ant-modal {
    background-color: transparent;
  }

  .ant-tabs .ant-tabs-tab-btn:hover {
    color: $hover-color;
  }

  .header {
    border-bottom-color: $border-color;
  }

  .ant-modal .ant-modal-content {
    background-color: $background-color;
  }

  .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
    background: transparent;
    border-color: $border-color;
  }

  .ant-table-wrapper .ant-table.ant-table-bordered > .ant-table-container {
    border-color: $border-color;
  }
  .ant-table-wrapper
    .ant-table.ant-table-bordered
    > .ant-table-container
    > .ant-table-content
    > table {
    th {
      border-inline-end-color: $border-color;
    }
    td {
      border-inline-end-color: $border-color;
    }
  }

  // .ant-btn {
  //   color: $text-color;
  //   background-color: $background-color;
  // }

  .ant-tabs .ant-tabs-tab {
    color: $text-color;
    background-color: $background-color;
  }

  .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active {
    color: $text-color;
    background-color: $background-color-active;
  }

  .dashboard .dashboard .resize-handler {
    background: #ccc4;

    &:hover,
    &.focused {
      background: #aaa4;
    }
  }

  .sidebar-inner svg {
    fill: $text-color;
    width: 16px;
  }

  .vision-type svg {
    fill: $text-color;
    display: block;
    margin-right: 10px;
    width: 20px;
    height: 20px;
  }

  .content {
    color: $text-color;
    background-color: $background-color;

    div.header.normal {
      color: $text-color;
      background-color: $background-color;
    }

    .editor-wrapper {
      color: $text-color;
      background-color: $background-color;
    }

    .tabs-wrapper {
      color: $text-color;
      background-color: $background-color;
    }

    .ant-tabs {
      color: $text-color;
      background-color: $background-color;
    }

    .ant-form-item {
      color: $text-color;
      background-color: $background-color;
    }

    .ant-form-item .ant-form-item-label > label {
      color: $text-color;
      background-color: $background-color;
    }

    .ant-tabs-card .ant-tabs-nav .ant-tabs-tab {
      border-color: $border-color;
    }

    
    .logs-screenshots .ant-tabs-content {
      border-color: $border-color;
    }

    div.done-command {
      background-color: #819083 !important;
    }

    div.selected-command {
      background-color: #424234 !important;
    }
    
    .commands-view .command-row.footer-row {
      background-color: #424b5c;
    }
    
  }

  .file-root .file-node.selected > .tree-node-content {
    background-color: #8e8f74;
  }

  .file-root .file-node.success > .tree-node-content {
    background: #6f8d73;
  }

  .file-root .file-node.selected.success > .tree-node-content::after {
      border-color: #a1cba8;
  }

  .file-root .tree-node.success > .tree-node-content {
    background: #6f8d73;
  }

  .file-root .tree-node.selected > .tree-node-content {
    background-color: #8e8f74;
  }

  .file-root .tree-node.selected.success > .tree-node-content::after {
      border-color: #a1cba8;
  }



  //   .file-root .tree-node .tree-node .tree-node .tree-node-content {
  //     padding-left: 40px;
  // }

  .dashboard .commands-view .command-row:hover {
    background: #7e858a;
  }

  .context-menu .ant-menu .ant-menu-item {
    color: $text-color;
  }

  .ant-menu-submenu-title:hover {
    color: rgb(236, 236, 236);
  }

  // Scrollbar 
  /* Chrome and Safari (WebKit) using vendor prefix */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background-color: $dark-scrollbar-background;
  }

  ::-webkit-scrollbar-thumb {
    background-color: $dark-scrollbar-thumb;
    border-radius: 6px;
    border: 2px solid $dark-scrollbar-background;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: $dark-scrollbar-thumb-hover;
  }

  ::-webkit-scrollbar-corner {
    background-color: $dark-scrollbar-background;
  }

  /* Firefox and other browsers using standard properties */
  scrollbar-width: thin; /* Adjust width as needed (auto, thin, none) */
  scrollbar-color: $dark-scrollbar-background $dark-scrollbar-thumb; /* Adjust colors */


  .CodeMirror-scrollbar-filler {
    background-color: $background-color;
  }
}
