@import '~fixed-data-table-2/dist/fixed-data-table-base.min.css';
@import '~sass-flex-mixins/src/sass-flex-mixins.scss';
@import '../utils/theme/variables.scss';
@import './tabloVariables.scss';

.tablo {
  /*
    try to avoid as much as possible to assign css rules to fdt classnames, use tablo ones instead
  */

  .tablo-row {
    .tablo-cell {
      border-bottom: $row-border-width solid $row-border-color;
    }
  }

  .fixedDataTableRowLayout_rowWrapper:last-child {
    .tablo-row {
      .tablo-cell {
        border-bottom: $last-row-border-width solid $last-row-border-color;
      }
    }
  }

  .public_fixedDataTable_main,
  .public_fixedDataTable_header,
  .public_fixedDataTableCell_main {
    // reset all the borders
    border: none;
  }

  .public_fixedDataTable_main {
    // border-right on .tablo selector doesn't work, so put all borders here
    border-top: $table-border-top-width solid $table-border-top-color;
    border-right: $table-border-right-width solid $table-border-right-color;
    border-bottom: $table-border-bottom-width solid $table-border-bottom-color;
    border-left: $table-border-left-width solid $table-border-left-color;
  }

  // TODO problem: confinate all fdt classes here, or avoid all non-core feature css class in plugins stylesheets?
  .public_fixedDataTableColumnResizerLine_main {
    border-width: 0; // to reset
    border-right: $column-resizer-line-width solid $column-resizer-line-color;
  }

  .fixedDataTableLayout_hasBottomBorder {
    border-width: 0; // reset ftd default borders
  }

  .public_fixedDataTableRow_fixedColumnsDivider {
    width: 0;
    border-width: 0; // to reset
    border-right: $fixed-columns-separator-width solid $fixed-columns-separator-color;
  }

  // bg color for odd/even rows (applied to cells for reliability)
  .public_fixedDataTableRow_odd {
    .public_fixedDataTableCell_main {
      background: $odd-row-background;
    }

    &:hover {
      .public_fixedDataTableCell_main {
        background: $cell-odd-row-background-hover;
      }
    }
  }

  .public_fixedDataTableRow_even {
    .public_fixedDataTableCell_main {
      background: $even-row-background;
    }

    &:hover {
      .public_fixedDataTableCell_main {
        background: $cell-even-row-background-hover;
      }
    }
  }

  // scrollbar
  .public_fixedDataTable_horizontalScrollbar {
    height: $scrollbar-size + 8px !important;

    > div {
      height: $scrollbar-size + 8px !important;
    }
  }

  .public_Scrollbar_main {
    &.ScrollbarLayout_mainHorizontal {
      height: $scrollbar-size + 8px;

      &:hover {
        height: $scrollbar-size * 1.25 + 8px;
      }
    }

    &.ScrollbarLayout_mainVertical {
      width: $scrollbar-size + 8px;

      &:hover {
        width: $scrollbar-size * 1.25 + 8px;
      }
    }

    .public_Scrollbar_face::after {
      cursor: pointer;
      background-color: $scrollbar-color;
    }

    .public_Scrollbar_face:hover::after {
      background-color: $scrollbar-color-hover;
    }

    &.public_Scrollbar_mainActive,
    &:hover {
      background-color: $scrollbar-background-hover;
    }

    &.public_Scrollbar_mainActive {
      .public_Scrollbar_face::after {
        background-color: $scrollbar-color-hover;
      }
    }
  }
}

.tablo {
  // for cells with TextOverflow
  .public_fixedDataTableCell_main {
    @include display_flex();
    @include flex_align-items(stretch);

    .public_fixedDataTableCell_wrap1,
    .public_fixedDataTableCell_wrap2,
    .public_fixedDataTableCell_wrap3,
    .public_fixedDataTableCell_cellContent {
      @include display_flex();
      @include flex_align-items(stretch);

      width: 100%;
    }
  }

  font-size: 15px;
}

@import './Header/header.scss';
@import './Footer/footer.scss';
@import './Cell/cell.scss';

// plugins
@import './plugins/columnsReorder/columnsReorderGrid.scss';
@import './plugins/selectable/selectableGrid.scss';
@import './plugins/sortable/arrow.scss';
@import './plugins/sortable/sortableGrid.scss';
