@import "../config/index.scss";

// * ButtonGroup

$ButtonGroup-border-radius: $border-radius-medium;
$ButtonGroup-space: -1 * $border-width-small;


// * 1. Lay out items left to right
// * 2. Make IE10 play nice

.ButtonGroup {
  display: flex; // 1
  display: -ms-flexbox; // 2
}


// * 1. Overlap elements and override any vertical margins.
// * 2. Reset `border-radius` so corners line up.

.ButtonGroup > .Button + .Button {
  margin-left: $ButtonGroup-space; // 1
}

.ButtonGroup > .Button {
  border-radius: 0; // 2
}


// * Apply border-radius outer edges of first and last children

.ButtonGroup > .Button:first-child {
  border-top-left-radius: $ButtonGroup-border-radius;
  border-bottom-left-radius: $ButtonGroup-border-radius;
}

.ButtonGroup > .Button:last-child {
  border-top-right-radius: $ButtonGroup-border-radius;
  border-bottom-right-radius: $ButtonGroup-border-radius;
}