/*
 * The diff owns its two lines and nothing else: no width, no ground, no edge —
 * it inherits the container's, which is what lets one atom render in a table
 * cell, a detail row, a total and a sentence.
 *
 * `align` is the pair's agreement with ITSELF rather than with the container, so
 * it is a state on the root and both runs read it.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-diff-value {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* A `View` shrinks at 0 and a CSS box at 1. */
    flex-shrink: 0;
    min-width: 0;
    /* A hair, not a rung: the pair is ONE object and prose leading already puts
       air between the lines. */
    gap: var(--lotics-space-2);
  }

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

  .lotics-diff-value[data-layout="inline"] {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--lotics-space-6);
  }

  /* One line stays one line: the runs keep their baseline and the ROW moves. */
  .lotics-diff-value[data-layout="inline"][data-align="right"] {
    align-items: baseline;
    justify-content: flex-end;
  }

  /*
   * A NODE being replaced — a file badge, a chip, an avatar. Text decoration
   * cannot reach it, so the rule is DRAWN across it and the whole thing is
   * dimmed. Both are needed: the dimming alone reads as "secondary", the rule
   * alone reads as a divider.
   *
   * The rule is an overlay rather than a background, because the node it crosses
   * paints a ground of its own and would hide it; and a centred gradient rather
   * than a positioned hairline, because a 50% offset is a length this scale has
   * no rung for.
   */
  .lotics-diff-value__before[data-node] {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    position: relative;
    min-width: 0;
    opacity: 0.55;
  }

  .lotics-diff-value__before[data-node]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(
      to bottom,
      transparent calc(50% - 0.5px),
      var(--lotics-ink-muted) calc(50% - 0.5px),
      var(--lotics-ink-muted) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
  }
}