/* THE REGISTERS THAT NAME THIS RECORD — one line each. A LINE, NOT A ROW: no
 *  box, no wash and no chevron, and the only thing separating two of them is the
 *  leading between their lines. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-record-related {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    list-style: none;
    gap: var(--lotics-space-6);
  }

  .lotics-record-related__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }

  /* The name may wrap; the count and the dot after it may not — a number on its
     own line reads as the next relation. */
  .lotics-record-related__link {
    flex-shrink: 1;
    text-align: start;
  }

  .lotics-record-related__dot,
  .lotics-record-related__count {
    flex-shrink: 0;
  }

  /* The link wraps its whole run in one `Text`, which makes these three an
     INLINE flow, so the breathing space has to ride the glyph between them
     rather than a flex `gap`. */
  .lotics-record-related__dot {
    margin-inline: var(--lotics-space-4);
  }

  /* The NAME is the destination; the number qualifies it. Drawn in the link's
     own ink the two read as one address. */
  .lotics-record-related__count {
    color: var(--lotics-ink-muted);
  }
}