// 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.
.BtnGroup {
  display: inline-block;
  vertical-align: middle;
  @include clearfix();

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

.BtnGroup-item {
  position: relative;
  float: left;
  border-right-width: 0;
  border-radius: 0;

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

  &:last-child {
    border-right-width: 1px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  &.selected,
  &:focus,
  &:active,
  &:hover {
    border-right-width: 1px;

    + .BtnGroup-item,
    + .BtnGroup-form .BtnGroup-item {
      border-left-width: 0;
    }
  }
}

.BtnGroup-form {
  float: left;

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

  &:last-child .BtnGroup-item {
    border-right-width: 1px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  .BtnGroup-item {
    border-right-width: 0;
    border-radius: 0;
  }

  &.selected,
  &:focus,
  &:active,
  &:hover {
    .BtnGroup-item {
      border-right-width: 1px;
    }

    + .BtnGroup-item,
    + .BtnGroup-form .BtnGroup-item {
      border-left-width: 0;
    }
  }
}