@import url("./table.selectors.css");

table,
:--s-paragraph-table {
  --font-size: var(--global-font-size--small, 12px);
  --cell-pad-vert: 0.6667em; /* 8px if font-size is 12px */
  --cell-pad-horz: 1.3333em; /* 16px if font-size is 12px */
  --cell-line-height: 1.1;

  /* To prevent borders from being hidden */
  /* SEE: TABLE WITH A <thead> */
  border-collapse: separate; /* overwrite Bootstrap */
  border-spacing: 0;

  font-family: var(--global-font-family--sans--portal);
  font-size: var(--font-size);
}
:--s-paragraph-table {
  display: table; /* to mimic shrink-wrap width of real table */
}

/* TABLE WITH A <thead> */
/* FAQ: To __avoid__ <thead> border scrolling away on an `o-fixed-header-table`:
        - border must be on the cells
        - table must have `border-collapse: separate` */
thead tr:last-child :is(td, th) {
  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
}
/* TABLE WITH NO <thead> */
/* FAQ: To __avoid__ styling a __nested__ table, must use direct selector `>`  */
/* FAQ: To __ensure__ border is __visible__:
        - border must be on cell
          (because table has `border-collapse: separate`) */
tbody:not(thead + tbody) > tr:first-child > :is(td, th),
:--s-paragraph-table {
  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
}

/* To add bottom border to rows */
tr:not(:last-of-type) > :is(td, th),
:--s-paragraph-table p:not(:last-of-type) {
  border-bottom-width: var(--global-border-width--normal);
  border-bottom-style: solid;
  border-bottom-color: var(--global-color-primary--light);
}

/* To alternate table row colors (by coloring cells, not rows) */
/* FAQ: Colored cells hide sibling column cells scrolled underneath */
/* NOTE: On narrow screens, first column is pinned and others scroll under it */
tr:nth-child(odd) :is(th, td) {
  background: var(--global-color-background--app);
}
tr:nth-child(even) :is(th, td),
:--s-paragraph-table p:nth-child(even) {
  background: var(--global-color-primary--x-light);
}

:is(td, th),
:--s-paragraph-table p {
  vertical-align: top;
  padding-block: var(--cell-pad-vert);
  padding-inline: var(--cell-pad-horz);
}
/* To ensure <thead> height matches between browsers */
/* IMPORTANT: More than for consistency; `table--nested.css` requires this */
:is(td, th),
:--s-paragraph-table p {
  line-height: var(--cell-line-height);
}
/* To pin first column to left of table even during scroll */
/* WARNING: Design does NOT approve this */
/* TODO: Replace with APCD-CMS "responsive-data-tables" solution */
/* SEE: https://github.com/TACC/Core-CMS-Custom/blob/3bec84b/apcd-cms/src/apps/view_users/static/view_users_table/css/table.css#L65-L129 */
:is(th, td):first-child {
  position: sticky;
  left: 0;
}

th {
  text-align: inherit; /* copied from Bootstrap 4.0.0 */
}
thead > tr > th {
  font-weight: var(--bold);
}
tbody > tr > th {
  font-weight: var(--normal);
}

caption {
  font-size: var(--font-size);
  text-align: unset; /* undo Bootstrap _reboot.css */
  caption-side: top; /* override Bootstrap */

  /* To mimic table cell */
  padding-block: var(--cell-pad-vert);
  padding-inline: var(--cell-pad-horz);
}



/* Cell Content */

/* To override browser */
td ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
}
td li:not(:last-of-type) {
  /* To match line-height of other cells, but still allow space between items */
  margin-bottom: 0.5em;
}

/* To override browser */
td button,
:--s-paragraph-table p button {
  /* To match font-size of table cell text and links */
  font-size: inherit;
}

/* To override `site.css` or browser */
table p,
:--s-paragraph-table p {
  margin-top: 0;
}
table p:last-child,
:--s-paragraph-table p {
  margin-bottom: 0;
}