css/scss/_button-group.scss

// Button group
//
// A button group is a series of buttons laid out next to each other, all part
// of one visual button, but separated by rules to be separate.
// scss-lint:disable NestingDepth
.btn-group {
  display: inline-block;
  vertical-align: middle;
  @include clearfix();

  .btn {
    position: relative;
    float: left;

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

    &:first-child:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    // Bring any button into forefront for proper borders given negative margin below
    &:hover,
    &:active,
    &.selected {
      z-index: 2;
    }

    &:focus {
      z-index: 3;
    }

    // Tuck buttons into one another to prevent double border
    + .btn {
      margin-left: -1px;
    }
  }

  .btn + .btn-group-form,
  .btn-group-form + .btn,
  .btn-group-form + .btn-group-form {
    margin-left: -1px;
  }

  .btn-group-form {
    float: left;

    .btn {
      border-radius: 0;
    }

    &:first-child {
      .btn {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
      }
    }

    &:last-child {
      .btn {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
    }
  }
}

// Proper spacing for multiple button groups (a la, gollum editor)
.btn-group + .btn-group,
.btn-group + .btn {
  margin-left: 5px;
}