/*
 * ONE ITEM PER ROW — the register's own row rhythm, without its columns.
 *
 * The item is a `PressableRow variant="register"`, so the wash, the corner and
 * the press states are the register's and a list cannot drift from the table it
 * is an alternative to. What this sheet owns is only the three regions inside
 * it: the tick's gutter, the pair that takes the slack, and the trailing edge
 * the figure closes on.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-list-rows {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  /* Peers: one run and the next (constitution §2). */
  .lotics-list-rows__run {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-list-rows__run + .lotics-list-rows__run {
    margin-top: var(--lotics-space-24);
  }

  .lotics-list-rows__subhead {
    margin-bottom: var(--lotics-space-4);
  }

  /* THE REGISTER'S OWN ROW, floored at the same rung the table's rows stand on
     (`table.css`) — so a list and the table it is an alternative to are scanned
     at one rhythm, and an item whose name wraps grows rather than clips. */
  .lotics-list-rows__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
    min-height: var(--lotics-register-row);
    min-width: 0;
  }

  .lotics-list-rows__lead {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }

  /* Takes the slack, so the figure closes on the row's own right edge whatever
     the name is. */
  .lotics-list-rows__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
  }

  .lotics-list-rows__trail {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
    flex-shrink: 0;
  }

  /* A COLUMN, not a trailing run. Right-aligned tabular figures on their own are
     still ragged where what precedes them is not: the badge before each one
     started at a different x down the list, because the pair was laid out from
     the right edge inwards. The figure holds a floor wide enough for the amounts
     a register carries, so both edges line up the way a table's money column
     does. */
  .lotics-list-rows__figure {
    --lotics-list-rows-figure: 96px;
    min-width: var(--lotics-list-rows-figure);
    font-variant-numeric: var(--lotics-font-numeric);
    text-align: end;
  }

  .lotics-list-rows__acts {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }
}