/**
 * table.css — Table (.ui-table)
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css, _reset.css
 * @uses       oklch(from …) — translucent hover/footer tints
 * @tokens     --ui-table-* (@layer variables)
 */

@layer variables {
  :root {
    --ui-table-font-family: var(--font-family-body);
    --ui-table-font-size: var(--font-size-sm);

    --ui-table-foreground: var(--foreground);
    --ui-table-background: transparent;

    /* structural borders — the outer/footer rule, the header separator,
       the tbody row dividers, and the column dividers (grid variant) */
    --ui-table-border: 1px solid var(--border);
    --ui-table-head-border: var(--ui-table-border);
    --ui-table-row-border: var(--ui-table-border);
    --ui-table-column-border: none;

    --ui-table-cell-padding-block: var(--step-2);
    --ui-table-cell-padding-inline: var(--step-2);

    --ui-table-head-block-size: var(--step-10);
    --ui-table-head-foreground: var(--foreground);
    --ui-table-head-font-weight: var(--font-weight-strong);

    --ui-table-foot-background: oklch(from var(--muted) l c h / calc(alpha / 2));
    --ui-table-foot-font-weight: var(--font-weight-strong);

    --ui-table-row-background--hover: oklch(from var(--muted) l c h / calc(alpha / 2));
    --ui-table-row-background--selected: var(--muted);

    --ui-table-alternating-background: var(--muted);

    --ui-table-caption-foreground: var(--muted-foreground);
    --ui-table-caption-padding-block: var(--gap-xs);
    --ui-table-caption-padding-inline: var(--gap-xs);
  }
}

@layer zazz.components {
  /* ===========================================================================
  TABLE
  =========================================================================== */

  .ui-table {
    font-family: var(--ui-table-font-family);
    font-size: var(--ui-table-font-size);
    font-variant-numeric: tabular-nums;

    inline-size: 100%;

    color: var(--ui-table-foreground);
    background-color: var(--ui-table-background);

    caption-side: bottom;
    text-align: start;
  }

  .ui-table :is(th, td) {
    padding-block: var(--ui-table-cell-padding-block);
    padding-inline: var(--ui-table-cell-padding-inline);
    vertical-align: middle;
    text-align: start;
    border-inline: var(--ui-table-column-border);
  }

  .ui-table th {
    color: var(--ui-table-head-foreground);
    font-weight: var(--ui-table-head-font-weight);
  }

  .ui-table thead th {
    block-size: var(--ui-table-head-block-size);
    padding-block: 0;
  }

  .ui-table thead tr {
    border-block-end: var(--ui-table-head-border);
  }

  .ui-table tbody tr:not(:last-child) {
    border-block-end: var(--ui-table-row-border);
  }

  .ui-table tfoot {
    background-color: var(--ui-table-foot-background);
    font-weight: var(--ui-table-foot-font-weight);
    border-block-start: var(--ui-table-border);
  }

  .ui-table caption {
    color: var(--ui-table-caption-foreground);
    padding-block: var(--ui-table-caption-padding-block);
    padding-inline: var(--ui-table-caption-padding-inline);
  }

  /* ===========================================================================
  TABLE LAYOUT & CAPTION SIDE
  =========================================================================== */

  /* omit = table-layout: auto */
  .ui-table[data-layout="fixed"] {
    table-layout: fixed;
  }

  /* omit = caption-side: bottom (set on .ui-table) */
  .ui-table caption[data-side="top"] {
    caption-side: top;
  }

  /* ===========================================================================
  TABLE STATES
  =========================================================================== */

  /* hover/selected paint on the cells so they layer above any row stripe;
     disable hover with --ui-table-row-background--hover: transparent */
  .ui-table tbody tr:hover > :is(th, td) {
    background-color: var(--ui-table-row-background--hover);
  }

  .ui-table tbody tr[data-state="selected"] > :is(th, td) {
    background-color: var(--ui-table-row-background--selected);
  }

  /* ===========================================================================
  TABLE VARIANTS
  =========================================================================== */

  .ui-table[data-variant="alternating"] {
    --ui-table-row-border: none;
  }

  .ui-table[data-variant="alternating"] tbody tr:nth-child(even) {
    background-color: var(--ui-table-alternating-background);
  }

  .ui-table[data-variant="grid"] {
    --ui-table-column-border: var(--ui-table-border);

    border: var(--ui-table-border);
  }

  /* ===========================================================================
  TABLE SIZES
  =========================================================================== */

  .ui-table[data-size="sm"] {
    --ui-table-cell-padding-block: var(--step-1);
    --ui-table-cell-padding-inline: var(--step-1_5);
    --ui-table-head-block-size: var(--step-8);
  }
}