/*
 * The diff owns its two lines and nothing else, inheriting the container's width, ground and edge.
 * `align` is the pair's agreement with itself, so both runs read it off the root.
 */
@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;
    /* Held at its size. */
    flex-shrink: 0;
    min-width: 0;
    /* The pair is one object; leading already spaces 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);
  }

  /* 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 replaced node cannot take text decoration, so a rule is drawn across it and it dims; either
   * alone reads as secondary or as a divider. An overlay, since the node paints its own ground; a
   * centred gradient, since 50% is no rung.
   */
  .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)
    );
  }
}