@import '../theme/ant.less';

.button-size(@height, @padding, @font-size, @border-radius) {
  height: @height;
  padding: @padding;
  font-size: @font-size;
  border-radius: @border-radius;
}

.button-disabled() {
  &-disabled,
  &.disabled,
  &[disabled] {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      .button-color(@btn-disable-color, @btn-disable-bg, @btn-disable-border);

      text-shadow: none;
      box-shadow: none;
    }
  }
}

.button-variant-primary() {
  .button-color(@btn-primary-color, @btn-primary-bg, @btn-primary-bg);

  text-shadow: @btn-text-shadow;
  box-shadow: @btn-primary-shadow;

  &:hover,
  &:focus {
    .button-color(@btn-primary-color, @primary-1, @primary-1);
  }

  &:active,
  &.active {
    .button-color(@btn-primary-color, @primary-5, @primary-5);
  }

  .button-disabled();
}

.button-color(@color, @background, @border) {
  color: @color;
  background-color: @background;
  border-color: @border;
  > a:only-child {
    color: currentColor;
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent;
      content: '';
    }
  }
}

.btn() {
  position: relative;
  display: inline-block;
  font-weight: @btn-font-weight;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: @btn-border-width @btn-border-style transparent;
  box-shadow: @btn-shadow;
  cursor: pointer;
  transition: all 0.3s @ease-in-out;
  user-select: none;
  touch-action: manipulation;
  .button-size(@btn-height-base, @btn-padding-base, @font-size-base, @btn-border-radius-base);

  &,
  &:active,
  &:focus {
    outline: 0;
  }
  &:not([disabled]):hover {
    text-decoration: none;
  }
  &:not([disabled]):active {
    outline: 0;
    box-shadow: none;
  }
  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;
    }
  }
}

.btn-primary() {
  .button-variant-primary();
}