/**
 * Button:
 * `.Button`
 * Buttons are for actions. There are a few variant presets.
 *
 *     @example
 *     .row
 *       .col-xs
 *         a.Button.Button--default Default Button
 *       .col-xs
 *         a.Button.Button--primary Primary Button
 *       .col-xs
 *         a.Button.Button--action Action Button
 *       .col-xs
 *         a.Button.Button--transparent Transparent Button
 *       .col-xs
 *         a.Button.Button--danger Danger
 *     .row
 *       .col-xs
 *         a.Button.Button--small.Button--primary Small
 *       .col-xs
 *         a.Button.Button--large.Button--primary Large
 *       .col-xs
 *         a.Button.Button--sharp.Button--primary Sharp
 *       .col-xs
 *         a.Button.Button--primary.is-disabled Disabled
 *       .col-xs
 *         a.Button.Button--none None
 */

@import "./config";

.Button {
  display: inline-block;
  min-width: @button-min-width;
  padding: @button-vertical-padding @button-horizontal-padding;
  font-family: @button-font-family;
  font-size: @button-font-size;
  font-weight: @button-font-weight;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  border: @button-border;
  border-radius: @button-rounded-border-radius;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  background-image: none;
  white-space: nowrap;
  appearance: none;
  #celery.button-vertical-padding(@button-height, @button-font-size);
  #celery.button-animation(@button-transition-duration);

  &.is-disabled,
  &:disabled {
    opacity: @button-disabled-opacity;

    &:hover,
    &:active,
    &:focus {
      cursor: default;
    }
  }

  &:hover {
    #celery.button-animation(@button-transition-duration);
    text-decoration: none;
  }

  &:active {
    box-shadow: none;
  }

  &:active,
  &:focus {
    #celery.button-animation(@button-transition-fast-duration);
  }

  &:active,
  &:focus,
  &:active:focus {
    outline: none;
    text-decoration: none;
  }

  &:last-of-type {
    margin-bottom: 0;
  }
}

.Button--sharp {
  border-radius: @button-sharp-border-radius;
}

.Button--full {
  width: 100%;
  margin-bottom: @vertical-gutter-height;
}

.Button--small {
  font-size: @button-small-font-size;
  #celery.button-vertical-padding(@button-height, @button-small-font-size);
  padding: @button-vertical-padding (@button-horizontal-padding / 1.5);
}

.Button--large {
  font-size: @button-large-font-size;
  #celery.button-vertical-padding(@button-height, @button-large-font-size);
  padding: @button-vertical-padding (@button-horizontal-padding / 1.5);
}

.Button--primary {
  #celery.button-color(
    @button-primary-color,
    @button-primary-background-color
  );
}

.Button--action {
  #celery.button-color(
    @button-action-color,
    @button-action-background-color
  );
}

.Button--danger {
  #celery.button-color(
    @button-danger-color,
    @button-danger-background-color
  );
}

.Button--default {
  color: @button-default-color;
  border-color: @button-default-border-color;
  background-color: @button-default-background-color;

  &:hover,
  &:focus {
    color: @blue;
    background-color: @gray-lighter;
  }

  &:focus {
    background-color: lighten(@gray-lighter, .5%);
  }

  &:active {
    color: @blue;
    background-color: darken(@gray-lighter, 2%);
  }

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

.Button-price {
  font-weight: 400;
}

.Button--transparent {
  color: @button-default-color;
  background-color: transparent;
  border-color: transparent;
}

.Button--none {
  .Button--transparent;
  #celery.link;
  border: 0;
  padding: 0;
  min-width: auto;
  font-size: inherit;

  &.is-disabled {
    &,
    &:hover,
    &:active,
    &:focus {
      opacity: @button-disabled-opacity;
      color: @blue-dark;
    }
  }
}