/*
 * .SYNOPSIS
 * tables-lists.css - tables, lists and task lists.
 *
 * .USAGE
 *   Loaded in this order by MarkstrataWebPart.ts, because later rules
 *   override earlier ones:
 *
 *     base, typography, code, syntax, callouts, tables-lists, extras,
 *     chrome, the three themes, modifiers, print
 *
 * .NOTES
 * Since:     0.0.6
 * Ships in:  the web part bundle
 * Requires:  nothing else in this project
 */

.strata-table-scroll {
  margin: 0 0 var(--strata-block-gap);
  overflow-x: auto;
  /*
   * Sideways only, and said rather than left to be worked out.
   *
   * Undeclared, overflow-y is visible - and CSS computes visible to auto when
   * the other axis is auto, so the box could scroll vertically too. It takes
   * only a device that draws classic scrollbars for that to happen: the
   * horizontal bar comes out of the box's own height, the table is then taller
   * than what is left, and a vertical bar appears beside it. The bottom of the
   * table ends up behind the one and reachable only through the other, which
   * reads as a row that is there and cannot be seen.
   *
   * Nothing in this box is ever meant to scroll vertically. A table is as tall
   * as its rows and the box is as tall as the table.
   */
  overflow-y: hidden;
}

/*
 * A table that fits its column is let out of the box.
 *
 * The box exists so a wide table scrolls instead of stretching the page, and
 * it is also - unavoidably - a scroll container, which is what a sticky header
 * inside it sticks to. Stuck to a box that never scrolls downwards, a header
 * never moves at all. Whether a table needs the box is a measurement rather
 * than something a stylesheet can see, so the class is put on by the enhancer
 * and taken off again when the column changes width.
 */
.strata-table-scroll--fits {
  /*
   * Out of the box altogether, which means not a scroll container at all: no
   * scrollbars, nothing clipped, and no gutter taken out of the box's height.
   *
   * It was briefly hidden rather than visible, to keep the box a scroll
   * container so that it could confine the sticky header. That bought the
   * containment and cost more than it was worth - a scroll container clips,
   * takes a gutter on some devices, and is a scrollbar waiting to appear on a
   * table that has no reason to scroll. The header is simply not sticky here
   * instead, which it has no work to do anyway: nothing scrolls it.
   */
  overflow: visible;
}

/*
 * The header stays in view while the rows go past. The offset is the same one
 * a heading scrolled to clears itself by, so on a SharePoint page the header
 * lands under the suite header and the command bar rather than behind them.
 *
 * The shadow is doing a border's job: with border-collapse the borders belong
 * to the table rather than to the cell, so a cell that moves leaves its bottom
 * border behind, and the rows then slide under a header with nothing beneath
 * it. Painted inside the cell, it travels.
 *
 * IT STICKS TO ITS OWN BOX, AND top IS ZERO, AND BOTH OF THOSE ARE THE FIX
 * A sticky cell sticks to the nearest scrolling ancestor and is confined to
 * its own containing block, which for a header cell is the table. Both halves
 * matter, because getting either wrong parks the header at the bottom of its
 * own table, on top of the last row, which z-index then hides.
 *
 * It used to stick to the page, with top set to the offset that clears
 * SharePoint's suite header and command bar. That reads as a header that
 * follows the reader down a long table, and it is - until the sticky line
 * falls outside the table's rows, at which point the header is pushed as far
 * down as its containing block allows and sits over the last row. That needs
 * no scrolling to happen: a table whose top is above the offset line, which is
 * any table near the top of a SharePoint page, renders that way on load. It
 * came out as a blank band where the header should be, the header third, and a
 * row invisible underneath it.
 *
 * So it sticks only where there is a box that scrolls, and to that box, at top
 * zero: the header holds at the top of its own table and can never be pushed
 * anywhere else. A table that fits its column is let out of the box just
 * above, and its header is not sticky at all - which costs nothing, there
 * being nothing to scroll it.
 *
 * What this gives up is a header that follows the reader down a long table.
 * What it buys is that a header can never hide a row, and hiding a row is not
 * a matter of taste.
 */
.strata-table-scroll:not(.strata-table-scroll--fits) thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--strata-table-border, var(--strata-border));
}

/* On paper nothing scrolls, and a stuck header prints over the rows. */
@media print {
  .strata-table-scroll:not(.strata-table-scroll--fits) thead th {
    position: static;
  }
}

/* ------------------------------------------------------------ sorting */

/*
 * The button fills the cell so the whole header reads as the target, and
 * carries no styling of its own: it is the header cell's text, and it should
 * look like it.
 */
.strata-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.strata-th-sort:focus-visible {
  outline: 2px solid var(--strata-link);
  /* Inside the cell, not outside it. The box a table sits in is a scroll
     container, which is what confines the sticky header, and a ring drawn
     outside the first or last header cell would be clipped by it. */
  outline-offset: -2px;
}

/*
 * The arrow holds its space whether or not it is showing anything, so sorting
 * a column does not shift the header's text sideways. A faint pair of arrows
 * on hover is what says a column can be sorted at all.
 */
.strata-th-arrow {
  margin-left: auto;
  opacity: 0;
  font-size: 0.85em;
  line-height: 1;
}

.strata-th-arrow::after {
  content: '\2195';
}

.strata-th-sort:hover .strata-th-arrow,
.strata-th-sort:focus-visible .strata-th-arrow {
  opacity: 0.55;
}

.strata-content th[aria-sort='ascending'] .strata-th-arrow,
.strata-content th[aria-sort='descending'] .strata-th-arrow {
  opacity: 1;
  color: var(--strata-link);
}

.strata-content th[aria-sort='ascending'] .strata-th-arrow::after {
  content: '\2191';
}

.strata-content th[aria-sort='descending'] .strata-th-arrow::after {
  content: '\2193';
}

.strata-content table {
  width: auto;
  max-width: 100%;
  margin: 0 0 var(--strata-block-gap);
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95em;
}

.strata-table-scroll > table {
  margin-bottom: 0;
}

.strata-content th,
.strata-content td {
  padding: 6px 13px;
  border: 1px solid var(--strata-table-border, var(--strata-border));
  text-align: left;
  vertical-align: top;
}

.strata-content thead th {
  background-color: var(--strata-table-header-bg, var(--strata-bg-elevated));
  font-weight: 600;
  white-space: nowrap;
}

.strata-content tbody tr:nth-child(2n) td {
  background-color: var(--strata-table-stripe-bg, transparent);
}

.strata-content tbody tr:hover td {
  background-color: var(--strata-table-hover-bg, transparent);
}

/* ------------------------------------------------------------------- lists */

.strata-content ul,
.strata-content ol {
  margin: 0 0 var(--strata-block-gap);
  padding-left: var(--strata-list-indent, 2em);
}

.strata-content li {
  margin: var(--strata-list-item-gap, 2px) 0;
}

.strata-content li > ul,
.strata-content li > ol {
  margin: var(--strata-list-item-gap, 2px) 0;
}

.strata-content li::marker {
  color: var(--strata-list-marker, var(--strata-text-muted));
}

.strata-content li > p {
  margin-bottom: 8px;
}

/* -------------------------------------------------------------- task lists */

/* Only task items lose their marker: a list can mix task items and ordinary
   bullets, and the ordinary ones should keep theirs. */
.strata-content .strata-task-item {
  list-style: none;
  text-indent: -1.55em;
  padding-left: 1.55em;
}

.strata-content .strata-task-checkbox {
  width: 1em;
  height: 1em;
  margin: 0 0.45em 0 0;
  vertical-align: middle;
  accent-color: var(--strata-checkbox-accent, var(--strata-link));
  cursor: default;
}

.strata-content .strata-task-item[data-checked='true'] {
  color: var(--strata-task-done-color, inherit);
  text-decoration: var(--strata-task-done-decoration, none);
}