@import "ui-variables";
@import "ui-mixins";

.btn-background (@color, @hover-color, @selected-color, @text-color) {
  color: @text-color-subtle;
  background-color: transparent;
  transition: color 0.2s;

  &:hover, &:focus {
    color: @text-color-subtle;
  }
  &.selected,
  &.selected:hover {
    color: @text-color-highlight;
    &:hover {

    }
  }
}

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

.btn {
  .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color);
  &:active {
    box-shadow: none;
    -webkit-box-shadow: none;
  }
}

.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);
}

.caret {
  border-top: 5px solid #fff;
  margin-top: -1px;
}
