.bui-option-container(){
  border: 1px solid;
  display: inline-block;
  font-size: 0;
  padding: 2px 1px;
  border-radius: @border-radius-base;
}
.bui-group-option(){
  display: inline-block;
  cursor: pointer;
  border-radius: 2px;
  font-weight: @font-weight-regular;
  text-align: center;
  position: relative;
  white-space: nowrap;
  &-xs {
    padding: 0px 12px;
    margin: 0px 2px;
    font-size: @options-xs-font-size;
    line-height: @options-xs-line-height;
  }
  &-sm {
    padding: 1px 12px;
    margin: 1px 2px;
    font-size: @options-sm-font-size;
    line-height: @options-sm-line-height;
  }
  &-md {
    margin: 1px 2px;
    padding: 2px 12px;
    font-size: @options-md-font-size;
    line-height: @options-md-line-height;
  }
  &-lg {
    padding: 4px 12px;
    margin: 1px 2px;
    font-size: @options-lg-font-size;
    line-height: @options-lg-line-height;
  }
  &-xl {
    padding: 5px 12px;
    margin: 1px 2px;
    font-size: @options-xl-font-size;
    line-height: @options-xl-line-height;
  }
  &-plain {
    background-color: @options-plain-bg;
    color: @options-plain-color;
    &:hover {
      color: @options-plain-hover-color;
      background-color: @options-plain-hover-bg;
    }

    &:active {
      color: @options-plain-active-color;
      background-color: @options-plain-active-bg;
    }
    &-active,
    &-active:hover {
      background-color: @options-plain-selected-bg;
      color: @options-plain-selected-color;
    }
  }


  &-plain[disabled] {
    &,
    &:hover {
      cursor: not-allowed;
      color: @options-plain-disabled-color;
      background-color: @options-plain-bg;
    }

  }
  &-plain-active[disabled] {
    &,
    &:hover{
      cursor: not-allowed;
      background-color: @options-plain-selected-disabled-bg;
      color: @options-plain-selected-disabled-color;
    }
  }
  &-filled {
    background-color: @options-filled-bg;
    color: @options-filled-color;
    &:hover {
      color: @options-filled-hover-color;
      background-color: @options-filled-hover-bg;
    }
    &:active {
      color: @options-filled-active-color;
      background-color: @options-filled-active-bg;
    }
    &-active,
    &-active:hover {
      background-color: @options-filled-selected-bg;
      color: @options-filled-selected-color;
    }

  }
  &-filled[disabled] {
    &,
    &:hover {
      cursor: not-allowed;
      color: @options-filled-disabled-color;
      background-color: @options-filled-disable-bg;
    }
  }
  &-filled-active[disabled]{
    &,
    &:hover{
      cursor: not-allowed;
      background-color: @options-filled-selected-disabled-bg;
      color: @options-filled-selected-disabled-color;
    }
  }
}