.button-group {
  display: flex;
  margin: 0.25em 0.125em;

  .button {
    border-radius: 0;
    &.outline,
    &.bordered {
      margin: 0 !important;
    }
  }

  &:not(.vertical) {
    .button {
      // sometimes on active/focus-visible a white space will be created,
      // to fix this -1px margin is practical.
      margin: 0 -1px !important;

      &:first-child {
        border-start-start-radius: var(--#{$CSS_VAR_PFX}border-radius);
        border-end-start-radius: var(--#{$CSS_VAR_PFX}border-radius);
      }

      &:last-child {
        border-start-end-radius: var(--#{$CSS_VAR_PFX}border-radius);
        border-end-end-radius: var(--#{$CSS_VAR_PFX}border-radius);
      }
    }
  }

  &.vertical {
    // sometimes on active/focus-visible a white space will be create,
    // to fix this -1px margin is practical.
    flex-direction: column;

    .button {
      margin: -1px 0 !important;

      &:first-child {
        border-radius: var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius) 0 0;
      }

      &:last-child {
        border-radius: 0 0 var(--#{$CSS_VAR_PFX}border-radius) var(--#{$CSS_VAR_PFX}border-radius);
      }
    }
  }
}