table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;

  p {
    margin: 0;
  }
}

:where(thead, tbody) :where(th, td) {
  border-bottom: var(--border--light);
  padding: var(--space--small);
}

:where(tfoot) td,
caption {
  font-weight: var(--font-weight--bold);
  padding: var(--space--xx-small) var(--space--small);
  text-align: left;
}

:where(thead, tbody) :where(th, td):first-child {
  border-left: var(--border--light);
}

:where(thead, tbody) :where(th, td):last-child {
  border-right: var(--border--light);
}

th {
  border-top: var(--border--light);
  font-weight: var(--font-weight--normal);
  text-align: left;
  text-wrap: nowrap;
}

thead tr {
  background-color: var(--color--background-base);
}

tbody tr {
  background-color: var(--color--background-light);
}

.table-outer-wrapper {
  display: flex;
}

.table-inner-wrapper {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color--grayscale--05) transparent;
  flex: 1 1 0%;
  width: 1rem;
}

.table--sticky-last-column td:last-child,
.table--sticky-last-column th:last-child {
  position: sticky;
  right: 0;
  background-color: inherit;
  z-index: var(--z-index--base);
}

/*
  If the table can scroll horizontally, apply a border to the last column to
  visually separate it from the rest of the table. This is done using a solid
  box-shadow that only appears when the table can scroll, which is detected
  using a CSS animation that updates a custom property based on the scroll position.
*/
.table-inner-wrapper td:last-child,
.table-inner-wrapper th:last-child {
  animation-name: detect-scroll;
  animation-timing-function: linear;
  animation-timeline: scroll(nearest inline);

  --shadow-if-can-scroll: var(--can-scroll) 0 var(--border-width--base) 0 var(--border-width--base) var(--color--grayscale--02);

  box-shadow: var(--shadow-if-can-scroll, var(--shadow-if-cant-scroll));
}

@keyframes detect-scroll {

  from,
  to {
    --can-scroll: ;
  }
}