// I prefer the table with no borders but if we want to add one I think this works best
// var(--vscode-sideBar-border)

//Main Theme Variables
$backgroundColor: var(--vscode-editor-background); //background color of tabulator
$borderColor: transparent; //border to tabulator
$textSize: var(--vscode-editor-font-size); //table text size

//header theming
$headerBackgroundColor: transparent; //border to tabulator
$headerTextColor: var(--vscode-editor-foreground); //header text color
$headerBorderColor: transparent; //header border color
$headerSeparatorColor: transparent; //header bottom separator color
$headerMargin: 4px !default; //padding round header

//column header arrows
$sortArrowHover: #555 !default;
$sortArrowActive: #666 !default;
$sortArrowInactive: #bbb !default;

//row theming
$rowBackgroundColor: $backgroundColor; //table row background color
$rowAltBackgroundColor: transparent; //table row background color
$rowBorderColor: transparent; //table border color
$rowTextColor: var(--vscode-editor-foreground); //table text color
$rowHoverBackground: var(--vscode-list-hoverBackground); //row background color on hover
//row background color when selected
$rowSelectedBackground: var(--vscode-list-activeSelectionBackground);
//row background color when selected and hovered
$rowSelectedBackgroundHover: var(--vscode-list-activeSelectionBackground);

$editBoxColor: var(--vscode-focusBorder, #1d68cd); //border color for edit boxes
$errorColor: #dd0000 !default; //error indication

//footer theming
$footerBackgroundColor: transparent; //border to tabulator
$footerTextColor: var(--vscode-editor-foreground); //footer text color
$footerBorderColor: transparent; //footer border color
$footerSeparatorColor: transparent; //footer bottom separator color
$footerActiveColor: #d00 !default; //footer bottom active text color
@import '~tabulator-tables/src/scss/tabulator.scss';
@import '../editors/MinMax';
@import '../format/Progress';

.tabulator {
  .tabulator-tableholder {
    overflow-x: hidden;
    .tabulator-table {
      display: block;
      background-color: default;
    }
  }

  .tabulator-header-filter {
    input[type='search'] {
      color: var(--vscode-editor-foreground);
      background-color: var(--vscode-dropdown-background, default);
      border: 1px solid var(--vscode-dropdown-border, transparent);
      width: 50%;
      box-sizing: border-box;
      position: relative;
      padding: 2px 4px;
      box-sizing: border-box;
      border-radius: 2px;
      appearance: textfield !important;
    }
    input[type='search']:focus {
      outline: var(--vscode-focusBorder, default) solid 1px;
    }
  }

  .tabulator-row {
    background-color: default;
    .tabulator-row-even {
      background-color: default;
    }

    &.tabulator-group {
      font-family: monospace;
      background: unset;
      border-bottom: unset;
      border-right: unset;
      border-top: unset;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: unset;
      &:hover {
        background-color: $rowHoverBackground;
      }

      span {
        margin-left: unset;
        color: unset;
      }
    }
  }

  .datagrid-code-text {
    font-family: monospace;
    font-weight: var(--vscode-font-weight, normal);
    font-size: var(--vscode-editor-font-size, 0.9em);
  }

  .tabulator-tooltip {
    background: var(--vscode-editor-background);
    overflow-wrap: anywhere;
  }
  .tabulator-row.tabulator-selected {
    color: var(--vscode-list-activeSelectionForeground);
  }

  .tabulator-cell.datagrid-textarea {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    min-height: 0;
    height: 100%;
  }

  input[type='checkbox'] {
    vertical-align: middle;
  }

  .sort-by {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .sort-by--bottom {
    color: rgb(102, 102, 102);
    border-bottom: none;
    border-top: 6px solid rgb(102, 102, 102);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
  }
  .sort-by--top {
    color: rgb(102, 102, 102);
    border-bottom: 6px solid rgb(102, 102, 102);
    border-top: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
  }

  .number-cell {
    font-variant-numeric: tabular-nums;
  }
}

.tabulator-edit-list {
  border-color: var(--vscode-focusBorder, default);

  .tabulator-edit-list-item {
    color: var(--vscode-editor-foreground, 'white');
    &.active {
      background-color: var(--vscode-list-activeSelectionBackground);
      color: var(--vscode-editor-foreground, 'white');
    }

    &:hover {
      background-color: var(--vscode-list-activeSelectionBackground);
      color: var(--vscode-editor-foreground, 'white');
    }
  }
}
