@layer components {
  /*
    切り替えの一組。押すと状態が変わるボタンの並びなので、BC2の文の中の丸薬形（開くメニューの引き金）ではなく、
    控えめなボタン（実測: controls.md 1。平らな白、1px #ccc、下に 1px #ddd の影、角丸 5px）を隙間なくつなげた形にする。
    間は1本の線にし、外側の角だけを丸める。隣の枠は1px重ねる。
    手本に同じ部品は無い（推測）。BC2の切り替えは文の中の黒い丸薬形（overlays.md 1c・3d）だが、選んだ状態をピルや黒い塗りで
    示さない決まりなので、オンはチェックボックスの選んだ状態（実測: controls.md 9）と同じ淡い青の縦の塗りに紺の縁と文字にする。
  */
  .rx-toggle-group {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0;
    min-inline-size: 0;
    & > .rx-button:not(:last-child) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    & > .rx-button:not(:first-child) {
      margin-inline-start: calc(var(--rx-stroke-width) * -1);
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
    /* 枠の色が変わるボタン（ホバー・オン・フォーカス）を手前に置き、重ねた線がその色で見えるようにする。 */
    & > .rx-button:is(:hover, :focus-visible, [data-state="on"]) {
      z-index: 1;
    }
    /* 縦に並べる時は、幅をいちばん長い名前にそろえ、名前を先頭側に寄せる。二つ目からの上の枠を透かし、前のボタンの下の枠を1本の線にする。 */
    &[data-orientation="vertical"] {
      flex-direction: column;
      align-items: stretch;
      inline-size: fit-content;
      & > .rx-button {
        justify-content: start;
        margin-inline-start: 0;
        border-radius: var(--rx-radius-control);
      }
      /* 下の影は一番下のボタンにだけ付け、つないだ線が二重にならないようにする。 */
      & > .rx-button:not(:last-child) {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }
      & > .rx-button:not(:last-child, :focus-visible) {
        box-shadow: none;
      }
      & > .rx-button:not(:first-child) {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        border-block-start-color: transparent;
      }
      /* オンのボタンは上の枠も紺にし、塗りの上端を欠けさせない。 */
      & > .rx-button[data-state="on"]:not(:first-child, :disabled) {
        border-block-start-color: var(--rx-selected-edge);
      }
    }
    /* オンは、チェックボックスの選んだ状態と同じ淡い青の塗りに紺の縁と文字（--rx-selected-*）。 */
    & > .rx-button[data-state="on"]:not(:disabled) {
      border-color: var(--rx-selected-edge);
      border-block-end-color: var(--rx-selected-edge-end);
      background: var(--rx-selected-fill);
      color: var(--rx-selected-text);
      &:hover {
        background: var(--rx-selected-fill-hover);
      }
      &:focus-visible {
        box-shadow: var(--rx-focus-glow);
      }
    }
  }
  @media (forced-colors: active) {
    .rx-toggle-group > .rx-button[data-state="on"]:not(:disabled) {
      forced-color-adjust: none;
      border-color: Highlight;
      background: Highlight;
      color: HighlightText;
    }
  }
}