// 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: $spacer-1;
}

}

.BtnGroup-item {

position: relative;
float: left;
border-right-width: 0;
border-radius: 0;

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

&:last-child {
  border-right-width: $border-width;
  border-top-right-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
}

&.selected,
&[aria-selected=true],
&:focus,
&:active,
&:hover {
  border-right-width: $border-width;

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

}

.BtnGroup-parent {

float: left;

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

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

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

&.selected,
&[aria-selected=true],
&:focus,
&:active,
&:hover {
  .BtnGroup-item {
    border-right-width: $border-width;
  }

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

}

// ensure that the focus ring sits above the adjacent buttons .BtnGroup-item, .BtnGroup-parent {

&:focus,
&:active {
  z-index: 1;
}

}