//
// + Button group
// =============================================================================


%button-group {
  display: flex;

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

    &:hover,
    &:focus {
      background-color: remove-alpha($color-first-2, $white);
      z-index: 1;
    }

    &:active {
      background-color: remove-alpha($color-first-3, $white);
    }
  }
}

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

  button {
    @include margin(x x x (-$border-thickness), em);

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

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

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

  flex-direction: column;

  button {
    @include margin((-$border-thickness) x x x, em);

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

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

//
// + Button group
// =============================================================================


%button-group {
  display: flex;

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

    &:hover,
    &:focus {
      background-color: remove-alpha($color-first-2, $white);
      z-index: 1;
    }

    &:active {
      background-color: remove-alpha($color-first-3, $white);
    }
  }
}

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

  button {
    margin-left: em(-$border-thickness);

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

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

.button-group-vertical {
  @extend %button-group;
  flex-direction: column;

  button {
    margin-top: em(-$border-thickness);

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

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

Remove lifesaver includes for margin for simplicity
Remove lifesaver includes for margin for simplicity
