@import '~antd/es/button/style/index.less';
@import '../variable.less';

@btn-prefix-cls: ~'@{ant-prefix}-btn';

button[ant-click-animating-without-extra-node]:after {
  display: none; // 清除按钮点击的边框动效
}

.@{btn-prefix-cls} {
  height: @btn-height-base;
  padding: @btn-padding-vertical-base @btn-padding-horizontal-base;
  color: @text-color-secondary;
  border: @btn-default-border;
  background-color: @btn-default-background;
  box-shadow: none;
  svg {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  > .@{iconfont-css-prefix} + span {
    margin-left: @btn-icon-span-margin;
  }
  > span + .@{iconfont-css-prefix} {
    margin-left: @btn-icon-span-margin;
  }

  &:hover {
    color: @text-color-primary;
    border: @btn-default-hover-border;
    background-color: @btn-default-hover-background;
    svg {
      fill: currentColor;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
  }

  &:active,
  &:focus {
    color: @text-color-primary;
    border: @btn-default-focus-border;
    background-color: @btn-default-focus-background;
    svg {
      fill: currentColor;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
  }

  &-lg {
    height: @btn-height-lg;
    padding: @btn-padding-vertical-lg @btn-padding-horizontal-lg;
  }

  &-sm {
    height: @btn-height-sm;
    padding: @btn-padding-vertical-sm @btn-padding-horizontal-sm;
    font-size: @btn-font-size-sm;
    line-height: @btn-line-height-sm;
  }

  &-primary {
    color: @white-color-title;
    border-color: @btn-primary-background;
    background-color: @btn-primary-background;

    &:hover {
      color: @white-color-title;
      border-color: @btn-primary-hover-background;
      background-color: @btn-primary-hover-background;
      box-shadow: @btn-primary-hover-shadow;
    }

    &:active {
      color: @white-color-title;
      border-color: @btn-primary-focus-background;
      background-color: @btn-primary-focus-background;
    }

    &:focus {
      color: @white-color-title;
      border-color: @primary-color-focus;
      background-color: @primary-color-focus;
    }
  }

  &[disabled] {
    color: @text-color-disabled;
    border: @input-disabled-border;
    background-color: @input-disabled-background;
  }

  &-dashed {
    border: @btn-dashed-default-border;
    background-color: @btn-dashed-default-background;

    &:hover {
      border: @btn-dashed-hover-border;
      background-color: @btn-dashed-hover-background;
    }

    &:active {
      border: @btn-dashed-focus-border;
      background-color: @btn-dashed-focus-background;
    }

    &:focus {
      border: @btn-dashed-focus-border;
      background-color: @btn-dashed-focus-background;
    }

    &[disabled] {
      border: @btn-dashed-default-border;
    }
  }

  &-link {
    border: transparent;

    &:hover {
      border: transparent;
      background-color: @btn-dashed-hover-background;
      span {
        color: @text-color-primary;
      }
    }

    &:active,
    &:focus {
      border: transparent;
      background-color: @btn-dashed-focus-background;
    }
    &[disabled],
    &[disabled]:hover,
    &[disabled]:active,
    &[disabled]:focus {
      color: @text-color-disabled;
      border: @input-disabled-border;
      background-color: @input-disabled-background;
    }
  }

  &-primary&-dangerous {
    color: @white-color-title;
    background: @btn-error-primary-background;
    &:not([disabled]) {
      box-shadow: none;
    }

    &:not([disabled]):hover {
      color: @white-color-title;
      background: @btn-error-primary-hover-background;
      border-color: @error-color-hover;
    }

    &:not([disabled]):active,
    &:not([disabled]):focus {
      color: @white-color-title;
      background: @btn-error-primary-focus-background;
      border-color: @error-color-focus;
    }
  }

  &-dangerous&-link,
  &-dangerous {
    color: @btn-error-primary-background;
    border-color: @error-color-tag-border;
    svg {
      fill: currentColor;
    }

    &:hover {
      color: @btn-error-primary-hover-background;
      border-color: @error-color-hover;
      background-color: @btn-error-default-hover-background;
    }

    &:active,
    &:focus {
      color: @btn-error-primary-focus-background;
      border-color: @error-color-focus;
      background-color: @btn-error-default-focus-background;
    }
  }

  &-icon-only {
    width: @btn-icon-only-width;
    height: @btn-icon-only-width;
    padding: @btn-icon-only-padding;
    span {
      vertical-align: baseline;
    }
  }

  &&-loading::before {
    display: none;
  }

  & .@{ant-prefix}-icon {
    vertical-align: bottom;
  }
}