.sticky-data-table {
  border-collapse: separate;
  border-spacing: 0;
}

.sticky-data-table thead th {
  background: var(--color-surface-alt);
  box-shadow:
    inset 0 -1px 0 var(--color-border),
    0 10px 18px -18px rgba(15, 23, 42, 0.55);
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease,
    top 200ms ease;
}

.dark .sticky-data-table thead th {
  box-shadow:
    inset 0 -1px 0 var(--color-border),
    0 12px 22px -18px rgba(0, 0, 0, 0.85);
}

.sticky-table-header-clone {
  position: fixed;
  display: none;
  overflow: hidden;
  pointer-events: none;
  /* TWO RUNGS UNDER --z-sticky: under the pinned page header (--z-sticky) and the
     stuck section header (--z-sticky - 1), and still over --z-raised content. It
     fakes a sticky <thead>, so a side panel or a menu opened over the table still
     covers it. At --z-sticky itself it TIED the page header, and a tie goes to the
     later element: this one is appended to <body>, so it painted over the title.
     The script also never places it above the stack's bottom edge
     (sticky_table_header.js, placement), so the rung is the second guard. */
  z-index: calc(var(--z-sticky, 30) - 2);
}

.sticky-table-header-clone table {
  border-collapse: separate;
  border-spacing: 0;
}

.sticky-table-header-clone thead th {
  position: static;
  background: var(--color-surface-alt);
  box-shadow:
    inset 0 -1px 0 var(--color-border),
    0 12px 22px -18px rgba(15, 23, 42, 0.65);
}

.dark .sticky-table-header-clone thead th {
  box-shadow:
    inset 0 -1px 0 var(--color-border),
    0 14px 24px -18px rgba(0, 0, 0, 0.9);
}