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

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

.@{btn-prefix-cls} {
  height: @btn-height-base;
  padding: @btn-padding-vertical-base @btn-padding-horizontal-base;

  &:hover {
    color: @primary-color-hover;
    border-color: @primary-color-hover;
  }

  &:active {
    color: @primary-color-active;
    border-color: @primary-color-active;
  }

  &:focus {
    color: @primary-color-focus;
    border-color: @primary-color-focus;
  }

  &-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;
  }

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

  &-primary {
    &:hover {
      color: #fff;
      background-color: @primary-color-hover;
      border-color: @primary-color-hover;
    }

    &:active {
      color: #fff;
      background-color: @primary-color-active;
      border-color: @primary-color-active;
    }

    &:focus {
      color: #fff;
      background-color: @primary-color-focus;
      border-color: @primary-color-focus;
    }
  }

  &-dashed {
    &:hover {
      color: @primary-color-hover;
      border-color: @primary-color-hover;
    }

    &:active {
      color: @primary-color-active;
      border-color: @primary-color-active;
    }

    &:focus {
      color: @primary-color-focus;
      border-color: @primary-color-focus;
    }
  }

  &-link {
    &:hover {
      color: @primary-color-hover;
      border-color: transparent;
    }

    &:active {
      color: @primary-color-active;
      border-color: transparent;
    }

    &:focus {
      color: @primary-color-focus;
      border-color: transparent;
    }

    &:not([disabled]):hover,
    &:not([disabled]):active,
    &:not([disabled]):focus {
      > span {
        text-decoration: underline;
      }
    }
  }

  &-dangerous {
    &:hover {
      color: @error-color-hover;
      border-color: @error-color-hover;
    }

    &:active {
      color: @error-color-active;
      border-color: @error-color-active;
    }

    &:focus {
      color: @error-color-focus;
      border-color: @error-color-focus;
    }
  }

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

    &:active {
      background-color: @error-color-active;
      border-color: @error-color-active;
    }

    &:focus {
      background-color: @error-color-focus;
      border-color: @error-color-focus;
    }
  }

  &-dangerous&-link {
    &:hover {
      color: @error-color-hover;
    }

    &:active {
      color: @error-color-active;
    }

    &:focus {
      color: @error-color-focus;
    }
  }
}