.btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) {
  @border-shadow: inset 0 0 0 1px @border-color;
  @active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  color: @text-color;
  background-color: transparent;
  background-image: -webkit-linear-gradient(@color, darken(@color, 8%));
  box-shadow: @border-shadow;

  &:hover {
    color: @text-color-hover;
    background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 8%));
  }
  &:active,
  &.selected:hover:active {
    box-shadow: @active-shadow, @border-shadow;
  }
  &.selected,
  &.selected:hover {
    color: @text-color-selected;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0,.3), @border-shadow;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    background-image: -webkit-linear-gradient(darken(@selected-color, 8%), @selected-color);
  }
  &.selected:hover {
    box-shadow: @border-shadow;
    background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 8%));
  }
}

.btn-variant (@color) {
  @bg: darken(@color, 10%);
  @hover: @color;
  @selected: @color;
  @border: fadeout(darken(@color, 20%), 50%);
  .btn-background(@bg, @hover, @selected, @border, @text-color-selected, @text-color-selected);
}

.btn {
  .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @button-border-color, @text-color, @text-color-highlight);
}

.btn.btn-primary {
  .btn-variant(@background-color-info);
}
.btn.btn-info {
  .btn-variant(@background-color-info);
}
.btn.btn-success {
  .btn-variant(@background-color-success);
}
.btn.btn-warning {
  .btn-variant(@background-color-warning);
}
.btn.btn-error {
  .btn-variant(@background-color-error);
}

.btn-group > .btn {
  border: none;
}