/*
 * ONE LINE, READ LEFT TO RIGHT: the glyph, whose move it is, and how long they
 * have.
 *
 * NO SEPARATOR BETWEEN THE TWO CLAUSES. A middot claims a relation while
 * refusing to name it and is the one mark a screen reader drops (`finding.css`
 * learned the same thing) — here the second clause is a countdown in its own
 * ink, which is the distinction, and the two read as one sentence aloud.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-awaiting {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-6);
  }

  /* THE NAME GIVES WAY, THE CLOCK NEVER DOES: a long party name truncates, and
     the reading it is owed by stays whole at every width. */
  .lotics-awaiting__party {
    min-width: 0;
  }

  .lotics-awaiting__clock {
    flex-shrink: 0;
  }
}