/*********************
 * Table scaffold utilities *
 *********************/
@utility table-scaffold {
  & {
    width: 100%;
    font-variant-numeric: lining-nums tabular-nums slashed-zero;
    caption-side: bottom;
  }
}

/* These overwrite Tailwind's default table-auto and table-fixed utilities */
@utility table-auto {
  :where(table) & {
    table-layout: auto;
  }

  :where(.table-grid) & {
    @apply grid-repeat-auto;
  }
}

@utility table-fixed {
  :where(table) & {
    table-layout: fixed;
  }

  :where(.table-grid) & {
    @apply grid-simple;
  }
}

/* Helpful utilities for code reuse *
 *********************/
@utility table-header-row {
  & {
    border-top: var(--header-row-border-top);
    border-bottom: var(--header-row-border-bottom);
    font-weight: bold;
  }
}

@utility table-header-column {
  font-weight: bold;
}

/* Not named `table-cell` — Tailwind emits its own `table-cell` utility alongside a same-named `@utility` instead of replacing it, so every `@apply` would also set `display: table-cell`. */
@utility table-cell-defaults {
  & {
    padding-block: var(--cell-padding-y, 0.5rlh);
    padding-inline-end: var(--cell-padding-x, 0.5rlh);
    text-align: left;

    /* &:last-child {
      padding-inline-end: 0;
    } */
  }
}

@utility table-center {
  :is(td, th) {
    text-align: center;
  }
}

@utility table-radius {
  th:first-child {
    border-start-start-radius: var(--radius);
  }

  th:last-child {
    border-start-end-radius: var(--radius);
  }

  :where(:not(thead)) {
    td:first-child {
      border-start-start-radius: var(--radius);
    }

    td:last-child {
      border-start-end-radius: var(--radius);
    }
  }

  tr:last-child {
    td:first-child {
      border-end-start-radius: var(--radius);
    }

    td:last-child {
      border-end-end-radius: var(--radius);
    }
  }
}

/* WIP. Not ready for external usage */

/* Basic table styles */
table {
  @apply table-scaffold;
  border-collapse: collapse;

  /* Alternate background on tr
  For consistency with others below, we're using 2n + 3
  Skips the first row because usually first row is th values.
  If you use thead then you have to adjust this accordingly
  Note that tbody is automatically created by the browser */
  &:has(thead) tr:nth-child(2n + 2) {
    background-color: var(--alt-row-color);
  }

  &:not(:has(thead)) tr {
    &:nth-child(2n + 3) {
      background-color: var(--alt-row-color);
    }
  }

  /* Column headers */
  th:where([scope='colgroup'], [scope='col'], :not([scope])) {
    @apply table-header-row;
  }

  /* Row Headers */
  /* Not adding border-right because it's a bit too much if table-layout is auto */
  th:where([scope='group'], [scope='row']) {
    @apply table-header-column;
  }

  /* All Cells */
  :is(th, td) {
    @apply table-cell-defaults;
  }
}

/*********************
 * Table with CSS Grid and Subgrid *
 *********************/

/* Table */

/* Use grid-repeat-auto by default. Provide --cols to adjust number of columns. */
.table-grid:where(table, [role='table'], [role='grid']) {
  @apply table-scaffold;
  @apply table-auto;
  max-width: 100%;
}

/* Thead, Tbody, Tfoot equivalents */

/* These need to be display:contents for subgrid to work */
.table-grid :where(thead, tbody, tfoot, [role='rowgroup']) {
  display: contents;
}

/* Tr / row */
.table-grid :where(tr, [role='row']) {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;

  /* Alternating row colours */
  &:nth-child(2n + 3) {
    background-color: var(--alt-row-color);
  }
}

/* Column Headers */

/* Same styles as above */
.table-grid
  :where(
    th[scope='colgroup'],
    th[scope='col'],
    th:not([scope]),
    [role='columnheader']
  ) {
  @apply table-header-row;
}

/* Row Headers */

/* Same style as row headers above */
.table-grid :where(th[scope='rowgroup'], th[scope='row'], [role='rowheader']) {
  @apply table-header-column;
}

/* All Cells */
.table-grid
  :where(
    [role='columnheader'],
    [role='rowheader'],
    [role='cell'],
    [role='gridcell'],
    th,
    td
  ) {
  @apply table-cell-defaults;
  display: grid; /* For easier content positioning */
  align-items: center;
}