/*
 * THE STACKED PAIR, and the mark that may open it. The root is the ROW that
 * seats `leading`; `pair` is the column the two lines stack in — one anatomy
 * whether or not a mark is drawn.
 *
 * The pair's `gap` is 0 and says so: each tight line box already contributes 3px
 * above and below, which is the 6px the pair wants.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-cell-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-lead-gap);
    min-width: 0;
    flex-shrink: 0;
  }

  .lotics-cell-stack__pair {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    flex: 1 1 auto;
  }

  .lotics-cell-stack__pair[data-align="right"] {
    align-items: flex-end;
  }

  .lotics-cell-stack__pair[data-align="center"] {
    align-items: center;
  }
}