/*
 * A bridge (BridgeHelper#bridge_tag): a figure taken
 * step by step to another, one row a step, the bar floating where the
 * running total stands. On the income statement (revenue to net income), the
 * balance sheet (assets less liabilities to equity) and
 * the cash flow (operating cash flow to the change in cash). Sideways rather
 * than as upright bars, so every label reads whole at any width.
 *
 * Money in is pale green, money out one neutral, totals ink-green; only the
 * last total, the result, is green or brick by its sign. The figures are the
 * table; the bars are hidden from assistive technology.
 */
@layer components {
  .bridge {
    container: bridge / inline-size;
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto;
    column-gap: var(--space-md);
    font-size: var(--text-data);
    line-height: var(--leading-data);
  }

  .bridge--with-share {
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto auto;
  }

  .bridge__head,
  .bridge__row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
  }

  .bridge__head {
    padding-block-end: var(--space-2xs);
    border-block-end: var(--rule-hairline);
    border-block-end-color: var(--color-ink);
    color: var(--color-ink-muted);
    font-size: var(--text-table-head);

    & > :nth-child(n + 3) {
      text-align: end;
    }
  }

  .bridge__row {
    min-block-size: 2rem;
    border-block-end: var(--rule-hairline);
  }

  .bridge__row--total {
    border-block-end-color: var(--color-ink);

    & .bridge__label,
    & .bridge__value {
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
    }
  }

  .bridge__label {
    padding-block: var(--space-2xs);
    color: var(--color-ink-soft);
  }

  .bridge__track {
    position: relative;
    block-size: 1rem;

    /* The zero line, through every row. */
    &::before {
      content: "";
      position: absolute;
      inset-block: calc(-1 * var(--space-xs));
      inset-inline-start: var(--zero);
      border-inline-start: 1px solid var(--color-ink-muted);
    }
  }

  .bridge__bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--from);
    inline-size: max(var(--width), 2px);
    background: var(--color-volume);
  }

  .bridge__bar--in {
    background: var(--color-ramp-gain-2);
  }

  .bridge__bar--start,
  .bridge__bar--total,
  .bridge__bar--gain {
    background: var(--color-accent);
  }

  .bridge__bar--loss {
    background: var(--color-bar-loss);
  }

  .bridge__value,
  .bridge__share {
    text-align: end;
  }

  .bridge__share {
    min-inline-size: 3.5rem;
    color: var(--color-ink-muted);
  }

  /* Narrow: the label and figure on one line, the bar under them. */
  @container bridge (width < 30rem) {
    .bridge__row {
      grid-template-columns: minmax(0, 1fr) auto;
      padding-block-end: var(--space-xs);
    }

    .bridge__label {
      grid-column: 1;
    }

    .bridge__value {
      grid-column: 2;
    }

    .bridge__track {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .bridge__head,
    .bridge__share {
      display: none;
    }
  }
}