@layer components {
  /*
    切り替えて読むカード。手本に同じコンポーネントは無い（推測）。近い手本から次のように組む。
    - 前後の操作は、カードに重ねず、カードの下に一列に並べる。Highriseのページ送り（overlays.md「5a」:
      highrise-contacts-index-redesign-2011.jpg (212, 913)。「First / Page 1 / Next →」を一覧の下に横に並べる）と、
      BC2のCatch up（bc2-features-progress-catch-up.jpg。前の日へのボタンは中身に重ねず、中身の外の上に置く）に合わせる。
    - 前後は先頭側に、自動再生は末尾側に置く。ボタンの間は8px、カードからは12px空ける。
    - ボタンは共通の控えめなButton（22pxの正方形）。カードの見た目はCardが持つ。
  */
  .rx-carousel {
    container: rx-carousel / inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-inline-size: 0;
    color: var(--rx-text);
    & > .viewport {
      grid-row: 1;
      grid-column: 1;
      display: grid;
      min-inline-size: 0;
    }
    /*
      スライドは全て同じ場所に重ね、見えていないスライドも場所を残す。枠の高さは一番高いスライドで決まり、切り替えても動かない。
      Retrixは動きを使わないので、切り替えはその場で入れ替える。
    */
    & > .viewport > .slide {
      grid-area: 1 / 1;
      display: grid;
      min-inline-size: 0;
      & > .rx-card {
        block-size: 100%;
      }
    }
    & > .viewport > .slide[hidden] {
      visibility: hidden;
      pointer-events: none;
    }
    & > .viewport > .slide > .rx-card {
      min-inline-size: 0;
    }
    & > .viewport > .slide > .rx-card:has(> .preview) {
      display: grid;
      grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      column-gap: 1rem;
      & > .preview {
        grid-column: 1;
        grid-row: 1 / 5;
      }
      & > :is(.eyebrow, .title, .body, .meta) {
        grid-column: 2;
      }
      & > .preview + .eyebrow {
        margin-block-start: 0;
      }
    }
    & > .viewport > .slide > .rx-card > .eyebrow > .position {
      color: var(--rx-meta);
      font-family: var(--rx-control-font-family);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.025em;
    }
    /* 前後の操作と自動再生は、カードの下の一列に並べる。自動再生は末尾側へ寄せる。 */
    & > .controls {
      grid-row: 2;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--rx-space-2);
      margin-block-start: var(--rx-space-3);
    }
    /* 右から左に読む時は、前が右・次が左に来るので、矢印の向きを反転する。 */
    & > .controls > .step:dir(rtl) > .rx-button > .rx-icon {
      scale: -1 1;
    }
    & > .controls > .previous > .rx-button > .rx-icon {
      transform: rotate(180deg);
    }
    & > .controls > .rotation {
      margin-inline-start: auto;
    }
    & > .controls > .rotation > .pause-label,
    & > .controls > .rotation[data-state="playing"] > .play-label {
      display: none;
    }
    & > .controls > .rotation[data-state="playing"] > .pause-label {
      display: inline;
    }
    @container rx-carousel (inline-size < 27rem) {
      & > .viewport > .slide > .rx-card:has(> .preview) {
        display: flex;
        & > .preview + .eyebrow {
          margin-block-start: var(--rx-space-3);
        }
      }
    }
  }
}