// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(@color; @color-hover; @color-active; @background; @background-hover; @background-active; @border; @border-hover; @border-active; @background_fill) {
  color: @color;
  .background(@background_fill, @background);
  border-color: @border;
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    color: @color-active;
    .background(@background_fill, @background-active);
    border-color: @border-active;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      color: @color-hover;
      .background(@background_fill, @background-hover);
      border-color: @border-hover;
    }
  }

  .badge {
    color: @background;
    background-color: @color;
  }
}

// Button sizes
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;
}

// Background Fills
.background(0, @start: #fff){
  background:@start !important;
}
//horizontal
.background(1, @start: #fff){
  background: @start !important;
  background: -moz-linear-gradient(left, @start 0%, darken(@start, 20%) 100%) !important;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,@start), color-stop(100%,darken(@start, 20%))) !important;
  background: -webkit-linear-gradient(left, @start 0%,darken(@start, 20%) 100%) !important;
  background: -o-linear-gradient(left, @start 0%,darken(@start, 20%) 100%) !important;
  background: -ms-linear-gradient(left, @start 0%,darken(@start, 20%) 100%) !important;
  background: linear-gradient(to right, @start 0%,darken(@start, 20%) 100%) !important;
}
//vertical
.background(2, @start: #fff){
  background: @start !important;
  background: -moz-linear-gradient(top, @start 0%, darken(@start, 20%) 100%) !important;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,darken(@start, 20%))) !important;
  background: -webkit-linear-gradient(top, @start 0%,darken(@start, 20%) 100%) !important;
  background: -o-linear-gradient(top, @start 0%,darken(@start, 20%) 100%) !important;
  background: -ms-linear-gradient(top, @start 0%,darken(@start, 20%) 100%) !important;
  background: linear-gradient(to bottom, @start 0%,darken(@start, 20%) 100%) !important;
}
// radial
.background(3, @start: #fff){
  background: @start !important;
  background: -moz-radial-gradient(center, ellipse cover, @start 0%, #ffffff 100%) !important;
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,@start), color-stop(100%,darken(@start, 20%))) !important;
  background: -webkit-radial-gradient(center, ellipse cover, @start 0%,darken(@start, 20%) 100%) !important;
  background: -o-radial-gradient(center, ellipse cover, @start 0%,darken(@start, 20%) 100%) !important;
  background: -ms-radial-gradient(center, ellipse cover, @start 0%,darken(@start, 20%) 100%) !important;
  background: radial-gradient(ellipse at center, @start 0%,darken(@start, 20%) 100%) !important;
}
// diagonal
.background(4, @start: #fff){
  background: @start !important;
  background: -moz-linear-gradient(-45deg, @start 0%, darken(@start, 20%) 100%) !important;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,@start), color-stop(100%,darken(@start, 20%))) !important;
  background: -webkit-linear-gradient(-45deg, @start 0%,darken(@start, 20%) 100%) !important;
  background: -o-linear-gradient(-45deg, @start 0%,darken(@start, 20%) 100%) !important;
  background: -ms-linear-gradient(-45deg, @start 0%,darken(@start, 20%) 100%) !important;
  background: linear-gradient(135deg, @start 0%,darken(@start, 20%) 100%) !important;
}