%button-group {
  display: flex;

  button {
    margin: unset;
  }
}

.button-group-horizontal {
  @extend %button-group;

  flex-direction: row;

  button {
    border-left: 2px solid red;
    border-right: 2px solid red;

    &:first-child {
      border-left: unset;
      border-right: 2px solid blue; // none
    }

    &:last-child {
      border-left: 2px solid blue; // none
      border-right: unset;
    }
  }
}

.button-group-vertical {
  @extend %button-group;

  flex-direction: column;

  button {
    border-top: 2px solid red;
    border-bottom: 2px solid red;

    &:first-child {
      border-top: unset;
      border-bottom: 2px solid blue; // none
    }

    &:last-child {
      border-top: 2px solid blue; // none
      border-bottom: unset;
    }
  }
}

%button-group {
  display: flex;

  button {
    border-radius: unset; // should check to see if needs to be unset?
    margin: unset;
  }
}

.button-group-horizontal {
  @extend %button-group;

  flex-direction: row;

  button {
    &:first-child {
      @include radius($border-radius x x $border-radius, em);
    }

    &:last-child {
      @include radius(x $border-radius $border-radius x, em);
    }
  }
}

.button-group-vertical {
  @extend %button-group;

  flex-direction: column;

  button {
    &:first-child {
      @include radius($border-radius $border-radius x x, em);
    }

    &:last-child {
      @include radius(x x $border-radius $border-radius, em);
    }
  }
}

Remove temporary borders and use border-radius for button groups
Remove temporary borders and use border-radius for button groups
