ButtonGroup.css

.buttonGroup {
  display: inline-flex;
  justify-content: space-between;

  &.fullWidth {
    width: 100%;

    & > * {
      width: 100%;
    }
  }

  & > :first-child,
  & > :first-child::before {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  & > :last-child,
  & > :last-child::before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  & > :not(:first-child) {
    margin-left: -1px;
  }

  & > :not(:first-child, :last-child),
  & > :not(:first-child, :last-child)::before {
    border-radius: 0;
  }
}

[dir="rtl"] {
  & .buttonGroup {
    & > :first-child,
    & > :first-child::before {
      border-radius: 0 var(--radius) var(--radius) 0;
    }

    & > :last-child,
    & > :last-child::before {
      border-radius: var(--radius) 0 0 var(--radius);
    }

    & > :not(:first-child) {
      margin-left: 0;
      margin-right: -1px;
    }
  }
}