@layer components {
  /*
    主操作と▾をつなげた一組。二つは別々の共通Buttonのまま、向き合う側の角を落とし、枠を1px重ねて間を1本の線にする。
    塗りの操作（実測: controls.md 3「BC2 の主ボタン」。平らな緑と濃い緑の枠）では区切りを白く透かし、
    控えめな操作（実測: controls.md 1。1px #ccc）ではボタンと同じ灰色の枠にする。
    つなぎ方はBC2の書式ツールの一組（実測: screenshots/basecamp2-official/bc2-features-drag-and-drop-drag-zone.jpg
    (103, 298, 226, 15)。控えめなボタンを隙間なく並べ、間を枠と同じ色の1本の線にし、外側の端だけを丸める）と同じにする。
    主操作と▾の組そのものは手本に無い（推測）。主操作の区切りを白く透かすのも推測。
  */
  .rx-split-button {
    display: inline-flex;
    align-items: stretch;
    max-inline-size: 100%;
    & > .main {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    & > .rx-dropdown-menu {
      margin-inline-start: calc(var(--rx-stroke-width) * -1);
    }
    /* ▾の部分は細くし、四角い最小幅を持たせない。 */
    & > .rx-dropdown-menu > .rx-button {
      min-inline-size: 0;
      padding-inline: 0.5em 0.625em;
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      border-inline-start-color: color-mix(in srgb, var(--rx-surface) 40%, transparent);
    }
    &[data-variant="secondary"] > .rx-dropdown-menu > .rx-button {
      border-inline-start-color: var(--rx-control-border);
    }
    /* 片方にホバーしても、もう片方と重なる影と枠が前に出ないよう、ホバーした方を手前に置く。 */
    & > :is(.main, .rx-dropdown-menu) {
      position: relative;
      &:hover,
      &:focus-within {
        z-index: 1;
      }
    }
  }
}