.@{css-prefix}checkbox-button {
  min-width: @radio-button-min-width;
  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  &:not(:last-child) {
    margin-right: -1px;
  }
  &:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  &:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  &:after{
    content: "";
    position: absolute;
    right: 1px;
    top: -2px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid;
    border-left-color: @border-color-base;
    transform:rotate(-45deg);
    border-radius: 2px;
  }
  &.single {
    &:after {
      border-top: 0;
      border-bottom: 0;
      border-left: 0;
    }
  }
  &:hover, 
  &:active, 
  &.active {
    &:after{
      border-left: 6px solid @primary-color;
    }
    &.secondary.bui-btn {
      border-color: @secondary-color;
      color: @secondary-color;
      &:after {
        border-left: 6px solid @secondary-color;
      }
    }
  }
  &:focus:not(.active) {
    color: @checkbox-button-focus-color !important; 
    background-color: @checkbox-button-focus-bg !important;
    border-color: @checkbox-button-focus-border !important;
    z-index: 0;
    &:hover {
      color: @primary-color-3 !important; 
      background-color: @checkbox-button-focus-bg !important;
      border-color: @primary-color-3 !important;
      z-index: @btn-active-zindex !important;
    }
    &.secondary {
      &:hover {
        color: @secondary-color-3 !important;
        border-color: @secondary-color-3 !important;
      }
    }
  }
  &.active.secondary {
    &:hover {
      color: @secondary-color !important;
      border-color: @secondary-color !important;
    }
  }
  &[disabled]{
    &:hover, &:active {
      &:after{
        border-left: 6px solid @border-color-base;
      }
    }
    &.active {
      &:after{
        border-left: 6px solid @primary-color-4;
      }
      &.secondary {
        border-left: 6px solid @secondary-color-4;
      }
    }
  }
  &.bui-btn.secondary {
    &:hover {
      border-color: @secondary-color;
      color: @secondary-color;
    }
  }
}
.@{css-prefix}checkbox-group {
  position: relative;
  display: inline-block;
  font-size: 0;
}