.wa-button-group {
  display: inline-flex;
  position: relative;
  isolation: isolate;

  > :hover,
  &::slotted(:hover) {
    z-index: 1;
  }

  /* Focus and checked are always on top */
  > :focus,
  &::slotted(:focus),
  > [aria-checked='true'],
  &::slotted([aria-checked='true']),
  > [checked],
  &::slotted([checked]) {
    z-index: 2 !important;
  }
}

/* Horizontal */
.wa-button-group:not([aria-orientation='vertical']):not(.wa-button-group-vertical) {
  > :not(:first-child),
  &::slotted(:not(:first-child)) {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
    --wa-border-inline-start-radius: 0;

    border-inline-start-color: var(--border-color, rgb(0 0 0 / 0.3));
    margin-inline-start: calc(-1 * var(--border-width, 1px));
  }

  > :not(:last-child),
  &::slotted(:not(:last-child)) {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
    --wa-border-inline-end-radius: 0;
  }
}

/* Vertical */
.wa-button-group[aria-orientation='vertical'],
.wa-button-group-vertical {
  flex-direction: column;

  > :not(:first-child),
  &::slotted(:not(:first-child)) {
    border-start-start-radius: 0 !important;
    border-start-end-radius: 0 !important;
    --wa-border-block-start-radius: 0;

    border-block-start-color: var(--border-color, rgb(0 0 0 / 0.3));
    margin-block-start: calc(-1 * var(--border-width, 1px));
  }

  > :not(:last-child),
  &::slotted(:not(:last-child)) {
    border-end-start-radius: 0 !important;
    border-end-end-radius: 0 !important;
    --wa-border-block-end-radius: 0;
  }
}
