@layer components {
  /*
    比較は、現在と変更後をそれぞれ細い枠の面に入れて並べる。色は37signalsのWriteboardの版の比較に合わせる
    （実測: 37signals-others/writeboard-version-compare-2006.gif (110, 5, 170, 19)。1倍。
    「You're comparing [version 16] and [version 15]」の新しい版は #ccffcc に1px #99cc99、古い版は #eeeeee に1px #cccccc。
    本文でも足した段落を #ccffcc で塗る。writeboard-compare-diff-2009.gif でも足した語は #ccffcc）。
    - 変わる時の現在は #eeeeee に1px #cccccc の面で、弱い文字（#666。#eeeeee の上で4.9:1）にする。
    - 変わる時の変更後は #ccffcc に1px #99cc99 の面にする。
    - 変わらない時は、両方を背後に重ねた親のシート（structure.md）と同じ #f9f9f9 に1px #e5e5e5 の面にする。
    - 二つの面の間は、手本の「and」と同じく面に重ねずに空けた所へ、矢印（変わらない時は等号）だけを置く。丸で囲まない。
    - 状態は、BC2のピル（高さ18px・角丸9px）。変わる時は件数の淡い青、変わらない時は担当者・期日の灰色。
    - 面の内側の余白は上下左右とも12px、見出しと中身の間は4px。
  */
  .rx-comparison {
    --rx-comparison-gap: var(--rx-space-6);
    --rx-comparison-old: #eeeeee;
    --rx-comparison-old-edge: #cccccc;
    --rx-comparison-new: #ccffcc;
    --rx-comparison-new-edge: #99cc99;
    container: rx-comparison / inline-size;
    min-inline-size: 0;
    color: var(--rx-text);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    overflow-wrap: anywhere;
    /* まとまりの見出しはSectionと同じ形。太字の名前・状態の順で、線は伸ばさない。 */
    & > .title {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--rx-space-1) var(--rx-space-2);
      margin: 0;
      font-size: inherit;
      font-weight: 600;
      & > .state {
        padding-inline: 0.5625rem;
        border-radius: var(--rx-radius-pill);
        background: var(--rx-pill-meta);
        color: var(--rx-pill-meta-text);
        font-size: var(--rx-small);
        font-weight: 400;
        line-height: 1.125rem;
      }
    }
    & > .pair {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      /* 狭い幅では面の間に24pxの行を空け、その中央に下向きの矢印を置く。 */
      grid-template-rows: auto var(--rx-comparison-gap) auto;
      margin-block-start: var(--rx-space-3);
      & > :is(.before, .after) {
        min-inline-size: 0;
        padding-block: var(--rx-space-3);
        padding-inline: var(--rx-space-3);
        border: var(--rx-stroke-width) solid var(--rx-sheet-behind-edge);
        border-radius: var(--rx-radius-surface);
        background: var(--rx-sheet-behind);
        & > h4 {
          margin: 0;
          color: var(--rx-muted);
          font-size: var(--rx-small);
          font-weight: var(--rx-label-weight);
          line-height: var(--rx-small-leading);
        }
        & > .body {
          margin-block-start: var(--rx-space-1);
          & > * + * {
            margin-block-start: var(--rx-space-2);
          }
        }
      }
      /* 現在は弱い文字にする。中のコンポーネントも弱い文字で描くよう、文字色のトークンをこの中だけ差し替える。 */
      & > .before {
        --rx-text: var(--rx-muted);
        grid-row: 1;
        color: var(--rx-muted);
      }
      & > .after {
        grid-row: 3;
      }
      /* 矢印のアイコン。狭い幅では上下の面の間に置き、下を向く。 */
      &::after {
        content: "";
        grid-row: 2;
        grid-column: 1;
        justify-self: center;
        align-self: center;
        inline-size: 1rem;
        block-size: 1rem;
        background: var(--rx-muted);
        mask: url("../assets/arrow-bold.svg") center / contain no-repeat;
        rotate: 90deg;
      }
    }
    /* 変わる時は、状態を件数のピルと同じ淡い青にし、現在を古い版の灰色、変更後を新しい版の緑の面で読ませる。 */
    &[data-changed="true"] {
      & > .title > .state {
        background: var(--rx-pill-count);
        color: var(--rx-pill-count-text);
      }
      & > .pair {
        & > .before {
          border-color: var(--rx-comparison-old-edge);
          background: var(--rx-comparison-old);
        }
        & > .after {
          border-color: var(--rx-comparison-new-edge);
          background: var(--rx-comparison-new);
          & > h4 {
            color: var(--rx-text);
          }
        }
        &::after {
          background: var(--rx-link);
        }
      }
    }
    &[data-changed="false"] > .pair {
      & > .before {
        --rx-text: inherit;
        color: inherit;
      }
      &::after {
        mask-image: url("../assets/equals-bold.svg");
        rotate: none;
      }
    }
    @container rx-comparison (inline-size >= 30rem) {
      & > .pair {
        grid-template-columns: minmax(0, 1fr) var(--rx-comparison-gap) minmax(0, 1fr);
        grid-template-rows: auto;
        column-gap: 0;
        & > :is(.before, .after) {
          grid-row: 1;
        }
        & > .before {
          grid-column: 1;
        }
        & > .after {
          grid-column: 3;
        }
        /* 広い幅では、左右の面の間の列の上下の中央に置く。 */
        &::after {
          grid-row: 1;
          grid-column: 2;
          rotate: none;
        }
        &:dir(rtl)::after {
          rotate: 180deg;
        }
      }
      &[data-changed="false"] > .pair::after {
        rotate: none;
      }
    }
  }
  @media (forced-colors: active) {
    .rx-comparison > .pair > :is(.before, .after) {
      border: var(--rx-stroke-width) solid CanvasText;
    }
    .rx-comparison > .pair::after {
      background: CanvasText;
    }
  }
}