@layer components {
  /*
    関連する操作の一組。並ぶのは押すと実行する操作なので、BC2の切り替えの丸薬形ではなく、
    控えめなボタン（実測: controls.md 1。平らな白、1px #ccc、下に 1px #ddd の影、角丸 5px）を隙間なくつなげた形にする。
    つなげた形はBC2の書式ツールの一組「Bold / Italic / Bullets / Numbers / QUOTE」（実測:
    screenshots/basecamp2-official/bc2-features-drag-and-drop-drag-zone.jpg (103, 298, 226, 15)。約0.73倍に縮小）と同じで、
    隣の枠を1px重ねて間を1本の線にし、角を丸めるのは外側の端だけ。主操作（緑）の▾の前には白く透かした区切りを入れる（推測）。
  */
  .rx-button-group {
    display: inline-flex;
    align-items: stretch;
    inline-size: fit-content;
    max-inline-size: 100%;
    gap: 0;
    & > .rx-button {
      min-inline-size: 0;
      flex: 1 1 auto;
    }
    & > .rx-dropdown-menu {
      flex: 0 0 auto;
    }
    & > .rx-button:not(:last-child) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    & > .rx-button:not(:first-child),
    & > .rx-dropdown-menu:not(:first-child) > .rx-button {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
    & > .rx-button:not(:first-child),
    & > .rx-dropdown-menu:not(:first-child) {
      margin-inline-start: calc(var(--rx-stroke-width) * -1);
    }
    /* 枠の色が変わるボタン（ホバー・フォーカス・選んでいる状態）を手前に置き、重ねた線がその色で見えるようにする。 */
    & > .rx-button:is(:hover, :focus-visible, [data-current="true"]),
    & > .rx-dropdown-menu:is(:hover, :focus-within) {
      z-index: 1;
    }
    & > .rx-dropdown-menu:not(:first-child) > .rx-button[data-variant="primary"] {
      border-inline-start-color: rgb(255 255 255 / 35%);
    }
  }
}