/* Override reactable defaults to respect PaperMod theme variables */

.Reactable {
  background-color: var(--theme) !important;
  color: var(--content) !important;
}

/* Header row */
.Reactable .rt-th {
  border-bottom-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Cell borders */
.Reactable .rt-td {
  border-top-color: var(--border) !important;
  color: var(--content) !important;
}

/* Table outer border */
.Reactable .rt-table {
  border-color: var(--border) !important;
}

/* Group header underline */
.Reactable .rt-th-group:after {
  background-color: var(--border) !important;
}

/* Striped rows */
.Reactable .rt-tr-striped {
  background-color: var(--code-bg) !important;
}

/* Hover highlight */
.Reactable .rt-tr-highlight:hover {
  background-color: var(--code-bg) !important;
}

/* Pagination border */
.Reactable .rt-pagination {
  border-top-color: var(--border) !important;
}

/* Filter and search inputs */
.Reactable .rt-filter,
.Reactable .rt-search,
.Reactable .rt-page-jump,
.Reactable .rt-page-size-select {
  background-color: var(--theme) !important;
  border-color: var(--border) !important;
  color: var(--content) !important;
}

/* No-data row border */
.Reactable .rt-tbody-no-data .rt-td {
  border-color: transparent !important;
}