@use "./variables.scss" as *;

table {
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: $base-margin;
  align-self: center;

  &.full-width {
    width: 100%;
  }

  &.center-table-headings th,
  &.center-table-headings td {
    // Important to override the inline styling applied by Markdown
    text-align: center !important;
  }
}

td {
  vertical-align: top;
}

th,
td {
  border: 1px solid var(--midground-faint);
  padding: $base-margin calc(1.5 * $base-margin);
  text-align: left;
  min-width: 0;
  overflow-wrap: break-word; // Widens cells for td content, IDK why
  background-clip: padding-box; // Firefox renders background through td borders?

  .footnotes & {
    font-size: smaller;
  }

  & ul {
    margin-left: 0;
    padding-left: $list-padding-left;
  }

  & ol {
    margin-left: 0;
    padding-left: $list-padding-left;

    & > li {
      padding-left: calc(0.5 * $base-margin);
    }
  }

  // Content should only be separated by the padding of the td itself
  & > * {
    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  // No point in having a br at the end of a table cell
  & > br:last-child {
    display: none;
  }
}

// The first column of a table should be right-aligned
th:first-child,
td:first-child {
  text-align: right;
}

th {
  background-color: var(--midground-faintest);
  text-align: left;
  padding: $base-margin calc(1.5 * $base-margin);
  word-wrap: normal;
  font-weight: 500;
}

tr {
  border-bottom: 1px solid var(--midground-faint);

  &:last-child {
    border-bottom: none;
  }
}

.table-container {
  overflow-x: auto;

  & > table {
    margin: calc(2 * $base-margin);
    padding: calc(3 * $base-margin);
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
  }

  &:first-child > table {
    margin-top: $base-margin;
  }
}

.title-cell {
  text-align: center;
  text-shadow: 0.3px 0.3px var(--foreground);
}

.percentage-cell {
  text-align: center;
  font-feature-settings: "tnum" 1; /* Use tabular numbers */
}
