:root {
  --span-table-cell-padding: 0.6rem 0.8rem;
  --span-table-border: 0.05rem solid var(--md-typeset-table-color);
}

.span-table-wrapper {
  max-width: 100%;
  overflow: hidden;
  overflow-x: auto;
  margin: 1em -0.8rem;
  touch-action: auto;
}

.span-table-wrapper:has(.span-table.full-width) {
  width: calc(100% + 1.6rem);
  max-width: calc(100% + 1.6rem);
}

.span-table {
  max-width: 100%;
  margin: 0 0.8rem 0.5em;
  border: var(--span-table-border);
  border-collapse: collapse;
  border-radius: 0.1rem;
  background-color: var(--md-default-bg-color);
  font-size: var(--table-font-size);
  overflow: auto;
  touch-action: auto;
}

.span-table.full-width {
  width: calc(100% - 1.6rem);
}

.span-table td {
  font-weight: 400;
  border-top: var(--span-table-border);
  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
  vertical-align: top;
}

.span-table td.align-center {
  text-align: center;
}

.span-table td.header {
  padding-block: 0.3rem;
  font-size: 1.2em;
  font-weight: 700;
  background: var(--color-gray-200);
}

.span-table td.header.nowrap {
  white-space: nowrap;
}

.span-table td.header:has(a:target) {
  background: var(--color-primary-bg);
}

.span-table tr:has(td.header) + tr > td {
  border-top: 0;
}

.span-table tr {
  transition: background-color 125ms;
}

.span-table tr:first-child td {
  font-weight: 700;
}

.span-table tr:not(:first-child):hover {
  background-color: var(--md-typeset-table-color--light);
  box-shadow: 0 0.05rem 0 var(--md-default-bg-color) inset;
}

/* To center the content of a column, set the table class from the following list.
Columns are counted from the end of the table (last-5-cell = the fifth cell in the row from the end).  */
.span-table.last-cell-centered tr :nth-last-child(1),
.span-table.last-2-cell-centered tr :nth-last-child(2),
.span-table.last-3-cell-centered tr :nth-last-child(3),
.span-table.last-4-cell-centered tr :nth-last-child(4),
.span-table.last-5-cell-centered tr :nth-last-child(5) {
  text-align: center;
}

.span-table.bordered td {
  border-left: var(--span-table-border);
}