// Mixins to generate button styles and state variations
.button-variant(
@color;
@color-hover;
@background;
@background-hover;
@background-active;
@border;
@border-hover;
@border-active;
@dropdown-background: @background;
@color-active: @color-hover) {
  color: @color;
  background-color: @background;
  border-color: @border;
  transition: color, background-color 0.15s ease-in-out;

  &:not(.disabled, :disabled, .btn-loading):hover {
    color: @color-hover;
    background-color: @background-hover;
    border-color: @border-hover;
  }

  &:not(.disabled, :disabled, .btn-loading):active,
  &:not(.disabled, :disabled, .btn-loading).active,
  .open > .dropdown-toggle& {
    color: @color-active;
    background-color: @background-active;
    border-color: @border-active;

    &:not(.disabled, :disabled):hover {
      color: @color-active;
      background-color: @background-active;
      border-color: @border-active;
    }
  }

  &:not(.disabled, :disabled, .btn-loading).active,
  .open > .dropdown-toggle& {
    background-image: none;
  }

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

.button-size(@padding; @font-size; @line-height; @border-radius: 9999px; @min-height: 0) {
  padding: @padding;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;
  // TODO: Remove min-height in The Future
  min-height: @min-height;

  .dropdown-menu {
    > li > a {
      font-size: @font-size;
      line-height: @line-height;
    }
  }
}

// @TODO Deprecate
.button-outline(@color, @active, @inverse) {
  .button-variant(
    @color;
    @inverse;
    transparent;
    @color;
    @active;
    @color;
    @color;
    @active;
    #FFF
  );
}

.btn-sm {
  height: 32px;
}