@mixin button-size($padding, $font-size, $border-radius) {
  padding: $padding;
  font-size: $font-size;
  border-radius: $border-radius;
}

@mixin button-color($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;
  // a inside Button which only work in Chrome
  // http://stackoverflow.com/a/17253457
  > a:only-child {
    color: currentColor;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: transparent;
    }
  }
}

@mixin button-variant($color, $background, $border) {
  @include button-color($color, $background, $border);

  &:hover {
    @include button-color(darken($color, 15%), darken($background, 15%), darken($border, 15%));
  }

  &:active,
  &.active {
    @include button-color(darken($color, 5%), darken($background, 5%), darken($background, 5%));
  }

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

@mixin button-custom($color, $background, $border) {
  @include button-color($color, $background, $border);

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

@mixin button-group-base($btnClassName) {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  > .#{$btnClassName} {
    position: relative;
    float: left;

    &:hover,
    &:active,
    &.active {
      z-index: 2;
    }
  }

  & .#{$btnClassName}-icon-only .iconfont {
    font-size: 12px;
    position: relative;
    top: 1px;
  }

  &-large .#{$btnClassName}-icon-only .iconfont {
    font-size: 14px;
    top: 2px;
  }

  &-small .#{$btnClassName}-icon-only .iconfont {
    font-size: 10px;
    top: 0;
  }

  &-circle .#{$btnClassName} {
    border-radius: $btn-circle-size;
  }

  // size
  &-large.#{$btn-prefix-cls}-group-circle .#{$btnClassName} {
    border-radius: $btn-circle-size-large;
  }

  &-large {
    & > .#{$btnClassName} {
      @include button-size($btn-padding-large, $btn-font-size-large, $btn-border-radius);
    }
  }

  &-small.#{$btn-prefix-cls}-group-circle .#{$btnClassName} {
    border-radius: $btn-circle-size-small;
  }

  &-small {
    & > .#{$btnClassName} {
      @include button-size($btn-padding-small, $btn-font-size, $btn-border-radius-small);
      > .#{$css-prefix-iconfont} {
        font-size: $btn-font-size;
      }
    }
  }
}

@mixin button-group-vertical-base($btnClassName) {
  display: inline-block;
  vertical-align: middle;
  > .#{$btnClassName} {
    display: block;
    width: 100%;
    max-width: 100%;
    float: none;
  }
}

@mixin btn() {
  min-width: 52px;//*************************************************************
  display: inline-block;
  margin-bottom: 0;
  font-weight: $btn-font-weight;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: $line-height-base;
  user-select: none;

  @include button-size($btn-padding-base, $btn-font-size, $btn-border-radius);
  // 导致按钮文本显示异常（有色差）
  // transform: translate3d(0, 0, 0);
  //transition: all @transition-time linear;
  transition:
    color $transition-time linear,
    background-color $transition-time linear,
    border $transition-time linear;

  > .#{$css-prefix-iconfont} {
    line-height: 1;
  }

  &,
  &:active,
  &:focus {
    outline-width: 0;
  }

  &.h-btn-focus:active,
  &.h-btn-focus:focus {
    // outline-width: 1px;
  }

  &:not([disabled]):hover {
    text-decoration: none;
  }

  &:not([disabled]):active {
    outline: 0;
    transition: none;
  }

  &.disabled,
  &[disabled] {
    cursor: $cursor-disabled;

    > * {
      pointer-events: none;
    }
  }

  &-large {
    @include button-size($btn-padding-large, $btn-font-size-large, $btn-border-radius);
    min-width: $btn-min-width-large;//************************
  }

  &-small {
    @include button-size($btn-padding-small, $btn-font-size-small, $btn-border-radius-small);
    min-width: 40px;//************
  }
}

// Default
@mixin btn-default() {
  @include button-custom( $btn-default-color, $btn-default-bg,  $btn-default-border);
  border-style: solid;
  border-radius: $btn-border-radius;
  color: $btn-default-color;
  background-color: $btn-default-bg;
  border-color: $btn-default-border;

  &:hover {
    color: $btn-default-hover-color;
    background-color: $btn-default-hover-bgcolor;
    border-color: $btn-default-hover-border-color;
  }

  &:active,
  &.active {
    color: $btn-default-press-color;
    background-color: $btn-default-press-bgcolor;
    border-color: $btn-default-press-border-color;
  }
}

// Primary
@mixin btn-primary() {
  @include button-custom($btn-primary-color, $btn-primary-bg, $btn-primary-bg);
  border-style: solid;
  border-radius: $btn-border-radius;
  color: $btn-primary-color;
  background-color: $btn-primary-bg;
  border-color: $btn-primary-border;

  &:hover {
    color: $btn-primary-hover-color;
    background-color: $btn-primary-hover-bgcolor;
    border-color: $btn-primary-hover-border-color;
  }

  &:active,
  &.active {
    color: $btn-primary-press-color;
    background-color: $btn-primary-press-bgcolor;
    border-color: $btn-primary-press-border-color;
  }
}

// Ghost
@mixin btn-ghost() {
  @include button-custom($btn-ghost-color, $btn-ghost-bg,  $btn-ghost-border);
  border-style: solid;
  border-radius: $btn-border-radius;
  color: $btn-ghost-color;
  background-color: $btn-ghost-bg;
  border-color: $btn-ghost-border;

  &:hover {
    color: $btn-ghost-hover-color;
    background-color: $btn-ghost-hover-bgcolor;
    border-color: $btn-ghost-hover-border-color;
  }

  &:active,
  &.active {
    color: $btn-ghost-press-color;
    background-color: $btn-ghost-press-bgcolor;
    border-color: $btn-ghost-press-border-color;
  }
}

// Dashed
@mixin btn-dashed() {
  @include button-variant($btn-ghost-color, $btn-ghost-bg, $btn-ghost-border);
  border-style: dashed;

  &:hover {
    @include button-color(darken($primary-color, 10%), $btn-ghost-bg, darken($primary-color, 10%));
  }

  &:active,
  &.active {
    @include button-color(darken($primary-color, 5%), $btn-ghost-bg, darken($primary-color, 5%));
  }
}

// Text
@mixin btn-text() {
  // @include button-variant($btn-ghost-color, $btn-ghost-bg, transparent);
  @include button-variant($btn-ghost-color, transparent, transparent);  // （已与ued沟通） TS:201911140525 h-button text模式下背景颜色存在问题，应该为透明

  // for disabled
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      // @include button-color($btn-disable-color, $btn-ghost-bg, transparent);
      @include button-color($btn-disable-color, transparent, transparent);  // （已与ued沟通）TS:201911140525 h-button text模式下背景颜色存在问题，应该为透明
    }
  }

  &:hover {
    // @include button-color( darken($primary-color, 10%), $btn-ghost-bg, transparent );
    @include button-color( darken($primary-color, 10%), transparent, transparent );   // （已与ued沟通）TS:201911140525 h-button text模式下背景颜色存在问题，应该为透明
  }

  &:active,
  &.active {
    // @include button-color( darken($primary-color, 5%), $btn-ghost-bg, transparent );
    @include button-color( darken($primary-color, 5%), transparent, transparent );   //（已与ued沟通）TS:201911140525 h-button text模式下背景颜色存在问题，应该为透明
  }
}

// Danger
@mixin btn-danger() {
  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
  border-style: solid;
  border-radius: 4px;

  &:hover {
    @include button-color(darken($btn-danger-color, 10%), $btn-danger-bg, ($btn-danger-color, 10%));
  }

  &:active,
  &.active {
    @include button-color(darken($btn-danger-color, 5%), $btn-danger-bg, darken($btn-danger-color, 5%));
  }
}

// Transparent
@mixin btn-transparent() {
  @include button-variant($btn-transparent-color, $btn-transparent-bg, $transparent-color);
  border: none;
  background: $btn-transparent-bg !important;

  &:hover {
    color: lighten($primary-color, 10%);
  }
  //&:focus,
  &:active,
  &.active {
    color: darken($primary-color, 10%);
  }
}

@mixin btn-info() {
  @include button-custom($btn-primary-color, $info-color, $info-color);
  border-style: solid;
  border-radius: 4px;

  &:hover {
    color: $btn-info-hover-color;
    background-color: $btn-info-hover-bgcolor;
    border-color: $btn-info-hover-border-color;
  }

  &:active,
  &.active {
    color: $btn-info-press-color;
    background-color: $btn-info-press-bgcolor;
    border-color: $btn-info-press-border-color;
  }
}

// Color
@mixin btn-color($color) {
  @include button-variant($btn-primary-color, $color, $color);

  &:hover,
  &:active,
  &.active {
    color: $btn-primary-color;
  }
}

// Circle for Icon
@mixin btn-circle($btnClassName: h-btn) {
  border-radius: $btn-circle-size;

  &.#{$btnClassName}-large {
    border-radius: $btn-circle-size-large;
  }

  &.#{$btnClassName}-size {
    border-radius: $btn-circle-size-small;
  }

  &.#{$btnClassName}-icon-only {
    @include square($btn-circle-size);
    @include button-size(0, $font-size-base + 2, 50%);

    &.#{$btnClassName}-large {
      @include square($btn-circle-size-large);
      @include button-size(0, $btn-font-size-large + 2, 50%);
    }

    &.#{$btnClassName}-small {
      @include square($btn-circle-size-small);
      @include button-size(0, $font-size-base, 50%);
    }
  }
}

// Group
@mixin btn-group($btnClassName: h-btn) {
  @include button-group-base($btnClassName);

  .#{$btnClassName} + .#{$btnClassName},
  .#{$btnClassName} + &,
  & + .#{$btnClassName},
  & + & {
    margin-left: -1px;
  }

  .#{$btnClassName}:not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  &:not(&-vertical) > .#{$btnClassName}:first-child {
    margin-left: 0;

    &:not(:last-child) {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
  }

  &:not(&-vertical) > .#{$btnClassName}:last-child:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  & > & {
    float: left;
  }

  & > &:not(:first-child):not(:last-child) > .#{$btnClassName} {
    border-radius: 0;
  }

  &:not(&-vertical) > &:first-child:not(:last-child) {
    > .#{$btnClassName}:last-child {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      padding-right: 8px;
    }
  }

  &:not(&-vertical)
  > &:last-child:not(:first-child)
  > .#{$btnClassName}:first-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding-left: 8px;
  }
}

@mixin btn-group-vertical($btnClassName: h-btn) {
  @include button-group-vertical-base($btnClassName);

  .#{$btnClassName} + .#{$btnClassName},
  .#{$btnClassName} + &,
  & + .#{$btnClassName},
  & + & {
    margin-top: -1px;
    margin-left: 0;
  }

  > .#{$btnClassName}:first-child {
    margin-top: 0;

    &:not(:last-child) {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  > .#{$btnClassName}:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  & > &:first-child:not(:last-child) {
    > .#{$btnClassName}:last-child {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      padding-bottom: 8px;
    }
  }

  & > &:last-child:not(:first-child) > .#{$btnClassName}:first-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    padding-top: 8px;
  }
}