@import "../color/config";
@import "../input/config";
@import "../border/config";

@button-font-family: @font-family-accent;
@button-font-size: 15px;
@button-small-font-size: @button-font-size - 1px;
@button-large-font-size: @button-font-size + 3px;
@button-font-weight: 400;
@button-height: @button-font-size + (@button-border-width * 2) + (@button-vertical-padding * 2);

@button-min-width: 100px;
@button-height: @input-height-base;
@button-vertical-padding: 15px;
@button-horizontal-padding: 20px;

@button-border-width: 1px;
@button-border: @button-border-width solid transparent;
@button-rounded-border-radius: @button-height;
@button-sharp-border-radius: @border-radius-base;

@button-transition-timing: cubic-bezier(0.420, 0.000, 0.580, 1.000);
@button-transition-duration: 0.15s;
@button-transition-fast-duration: 0.1s;

@button-disabled-opacity:  0.65;

@button-primary-color: @white;
@button-primary-background-color: @green;

@button-action-color: @white;
@button-action-background-color: @blue;

@button-danger-color: @white;
@button-danger-background-color: @orange;

@button-default-color: @blue;
@button-default-background-color: @white;
@button-default-border-color: @gray-light;

#celery {
  .button-animation(@duration) {
    transition: @duration @button-transition-timing;
    transition-property: border-color, background-color, opacity;
  }

  .button-vertical-padding(@height, @font-size, @border-width: 1px) {
    @button-vertical-padding: (@height - @font-size - @border-width * 2) / 2;
  }

  .button-color(@color, @background-color) {
    color: @color;
    background-color: @background-color;
    border-color: @background-color;

    &:hover {
      color: @color;
      background-color: darken(@background-color, @color-grade-1);
    }

    &:focus {
      background-color: darken(@background-color, (@color-grade-1 * .6));
    }

    &:active {
      color: @color;
      background-color: lighten(@background-color, @color-grade-1);
    }

    &.is-disabled,
    &:disabled {
      &:hover,
      &:active,
      &:focus {
        background-color: @background-color;
      }
    }
  }
}