.#{$ns}ButtonGroup {
  position: relative;
  display: inline-flex;
  vertical-align: middle;

  > .#{$ns}Button {
    position: relative;
    flex: 0 1 auto;
  }

  @if $Button-borderWidth>0 {
    > .#{$ns}Button {
      @include hover {
        z-index: 1;
      }

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

    .#{$ns}Button + .#{$ns}Button,
    .#{$ns}Button + .#{$ns}ButtonGroup,
    .#{$ns}ButtonGroup + .#{$ns}Button,
    .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
      margin-left: -$Button-borderWidth;
    }
  } @else if
    (
      variable-exists('ButtonGroup-divider-width') and
        variable-exists('ButtonGroup-divider-color')
    )
  {
    background-color: $ButtonGroup-divider-color;

    > .#{$ns}Button + .#{$ns}Button {
      margin-left: $ButtonGroup-divider-width;
    }
  }
}

.#{$ns}ButtonToolbar {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;

  .#{$ns}ButtonGroup {
    margin-left: px2rem(5px);
    margin-top: px2rem(5px);
    width: auto;
  }
}

.#{$ns}ButtonGroup {
  > .#{$ns}Button:first-child {
    margin-left: 0;
  }

  // cxd的ButtonGroup的is-active和:active样式不一样，这里做个兼容
  .#{$ns}Button--primary:not(:disabled):not(.is-disabled).is-active {
    @if variable-exists('ButtonGroup--primary-isActive-color') {
      color: $ButtonGroup--primary-isActive-color;
    }
    @if variable-exists('ButtonGroup--primary-isActive-bg') {
      background-color: $ButtonGroup--primary-isActive-bg;
    }
  }

  @if $Button-borderWidth>0 {
    > .#{$ns}Button:not(:last-child),
    > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    > .#{$ns}Button:not(:first-child),
    > .#{$ns}ButtonGroup:not(:first-child) > .#{$ns}Button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

.#{$ns}ButtonGroup--vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  .#{$ns}Button,
  .#{$ns}ButtonGroup {
    width: 100%;
  }

  > .#{$ns}Button + .#{$ns}Button,
  > .#{$ns}Button + .#{$ns}ButtonGroup,
  > .#{$ns}ButtonGroup + .#{$ns}Button,
  > .#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
    margin-top: -$Button-borderWidth;
    margin-left: 0;
  }

  > .#{$ns}Button:not(:last-child),
  > .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  > .#{$ns}Button:not(:first-child),
  > .#{$ns}ButtonGroup:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.#{$ns}ButtonGroupControl {
  display: inline-block;

  > .#{$ns}ButtonGroup--sm {
    margin-top: ($Form-input-height - $Button--sm-height) / 2;
  }

  > .#{$ns}ButtonGroup--xs {
    margin-top: ($Form-input-height - $Button--xs-height) / 2;
  }
}