Nested button groups not behaving correctly

[stichiboi]

Description

When trying to nest a button group inside another button group, the layout gets a bit weird.

Steps to reproduce

Here is the code

<div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-Button spectrum-Button--primary spectrum-ButtonGroup-item">
      <span class="spectrum-Button-label">Add Shapes</span>
    </button>
    <div class="spectrum-ButtonGroup spectrum-ButtonGroup-item">
      <button class="spectrum-Button spectrum-Button--primary spectrum-ButtonGroup-item">
        <span class="spectrum-Button-label">Update</span>
      </button>
      <button class="spectrum-Button spectrum-Button--primary spectrum-ButtonGroup-item">
        <span class="spectrum-Button-label">Refresh</span>
      </button>
    </div>
  </div>

Expected behavior with screenshots

This is what I tried to recreate. I made this in ExtendScript.

This is the result

Environment

• Spectrum CSS version: 2.13.0
• Browser(s) and OS(s): Firefox 78.0 on MacOS Catilina, but also on AE 2020

[stichiboi]

Additional Note: Also the Action Group layout is a bit messy when nesting it

The left button on the second row has the rounded corners on the wrong side (while the right one is okay)

Here is the code. I tried getting the bottom 2 buttons the same size using width: 50%, but they don't align correctly with the top one (they are a bit shorter). By setting all margins and paddings to 0, it gets a bit closer to the same lenght, but it's still not the same. EDIT: just noticed I can justify them. Don't mind this part

<!--Action Buttons-->
    <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--compact" style="width: 100%;">
        <button class="spectrum-ActionButton spectrum-ActionGroup-item" >
            <span class="spectrum-ActionButton-label">Add Shapes</span>
        </button>
        <div class="spectrum-ActionGroup spectrum-ActionGroup--compact">
            <button class="spectrum-ActionButton spectrum-ActionGroup-item" style="width: 50%;">
                <span class="spectrum-ActionButton-label">Update</span>
            </button>
            <button class="spectrum-ActionButton spectrum-ActionGroup-item" style="width: 50%;">
                <span class="spectrum-ActionButton-label">Link</span>
            </button>
        </div>
    </div>

[stichiboi]

This is how I hacked my way in the last example: I manually set the border radius to 0 or to the default value. I also needed to add a margin-top to the first button (also taken from the index-vars)

<!--Action Buttons-->
    <div class="spectrum-ActionGroup spectrum-ActionGroup--vertical spectrum-ActionGroup--compact" style="width: 100%;">
        <button class="spectrum-ActionButton spectrum-ActionGroup-item">
            <span class="spectrum-ActionButton-label">Add Shapes</span>
        </button>
        <div class="spectrum-ActionGroup spectrum-ActionGroup--compact spectrum-ActionGroup--justified">
            <button class="spectrum-ActionButton spectrum-ActionGroup-item"
                    style="
                    margin-top: calc(-1 * var(--spectrum-actionbutton-border-size, var(--spectrum-alias-border-size-thin)) / 2);
                    border-top-left-radius: 0px; border-top-right-radius: 0px;
                    border-bottom-left-radius: var(--spectrum-actionbutton-border-radius, var(--spectrum-alias-border-radius-regular));">
                <span class="spectrum-ActionButton-label">Update</span>
            </button>
            <button class="spectrum-ActionButton spectrum-ActionGroup-item"
                    style="border-bottom-left-radius: 0px;">
                <span class="spectrum-ActionButton-label">Link</span>
            </button>
        </div>
    </div>