.kuiButtonGroup {
  display: flex;
  align-items: center;

  .kuiButton + .kuiButton {
    margin-left: 4px;
  }
}

.kuiButtonGroup--united {
  > .kuiButton:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  > .kuiButton:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  > .kuiButton:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  > .kuiButton:only-child {
    border-radius: $kuiBorderRadius $kuiBorderRadius $kuiBorderRadius $kuiBorderRadius;
  }

  .kuiButton + .kuiButton {
    margin-left: 0;
  }
}

.kuiButtonGroup--fullWidth {
  display: flex;

  > .kuiButton {
    flex: 1 1 auto;
    text-align: center;
  }
}

// KuiButtonGroup doesn't pass down className, so can't create custom classname
// So this little gem was being applied in Home/components/tutorial
.eui-textCenter > .kuiButtonGroup,
.text-center > .kuiButtonGroup {
  display: inline-block;
}