@import url(../var.less);
@import url(../mixins/utils.less);
@import url(../mixins/_button.less);

@button-group-prefix: ~"@{prefix}button-group";


.@{button-group-prefix}{
  .utils-clearfix();
  display: inline-block;
  vertical-align: middle;

  & > .w-button {
    float: left;
    position: relative;
    & + .w-button {
      margin-left: 0;
    }
    &.is-disabled {
      z-index: 1;
    }
    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:first-child:last-child {
      border-top-right-radius: @button-round-radius;
      border-bottom-right-radius: @button-round-radius;
      border-top-left-radius: @button-round-radius;
      border-bottom-left-radius: @button-round-radius;

      &.is-round {
        border-radius: 20px;
      }

      &.is-circle {
        border-radius: 50%;
      }
    }
    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
    &:not(:last-child) {
      margin-right: -1px;
    }

    &:not(.is-disabled) {
      &:hover,
      &:focus,
      &:active {
        z-index: 1;
      }
    }
  }

  &.is-round {
    .w-button {
      &:first-child {
        border-top-left-radius: @border-radius-round;
        border-bottom-left-radius: @border-radius-round;
      }
      &:last-child {
        border-top-right-radius: @border-radius-round;
        border-bottom-right-radius: @border-radius-round;
      }
    }
  }

  &.@{button-group-prefix}--medium {
    .w-button {
      .button-size(@button-medium-padding-vertical, @button-medium-padding-horizontal, @button-medium-font-size, @button-radius);
    }
  }

  &.@{button-group-prefix}--small {
    .w-button {
      .button-size(@button-small-padding-vertical, @button-small-padding-horizontal, @button-small-font-size, @button-radius);
    }
  }

  @typeList: primary, success, warning, danger, info;
  .loopBtnType(@i) when (@i < length(@typeList)) {
    @type: extract(@typeList, @i);
    .w-button--@{type} {
      &:first-child {
        border-right-color: rgba(@color-white, 0.5);
      }
      &:last-child {
        border-left-color: rgba(@color-white, 0.5);
      }
      &:not(:first-child):not(:last-child) {
        border-left-color: rgba(@color-white, 0.5);
        border-right-color: rgba(@color-white, 0.5);
      }
    }
    .loopBtnType(@i+1)
  }
  .loopBtnType(1)

}