$btn-prefix-cls: "#{$css-prefix}btn";
.#{$btn-prefix-cls} {
  @include btn();
  @include btn-default();

  &-long {
    width: 100%;
  }

  .iconfont {
    font-size: $font-size-small;
  }

  & > .h-icon + span,
  & > span + .h-icon {
    margin-left: 4px;
    font-size: $font-size-small;
  }

  &-primary {
    @include btn-primary();

    .#{$btn-prefix-cls}-group:not(.#{$btn-prefix-cls}-group-vertical) &:not(:first-child):not(:last-child) {
      border-right-color: $btn-group-border;
      border-left-color: $btn-group-border;
    }

    .#{$btn-prefix-cls}-group:not(.#{$btn-prefix-cls}-group-vertical) &:first-child {
      &:not(:last-child) {
        border-right-color: $btn-group-border;

        &[disabled] {
          border-right-color: $btn-default-border;
        }
      }
    }

    .#{$btn-prefix-cls}-group:not(.#{$btn-prefix-cls}-group-vertical) &:last-child:not(:first-child),
    .#{$btn-prefix-cls}-group:not(.#{$btn-prefix-cls}-group-vertical) & + .#{$btn-prefix-cls} {
      border-left-color: $btn-group-border;

      &[disabled] {
        border-left-color: $btn-default-border;
      }
    }

    .#{$btn-prefix-cls}-group-vertical &:not(:first-child):not(:last-child) {
      border-top-color: $btn-group-border;
      border-bottom-color: $btn-group-border;
    }

    .#{$btn-prefix-cls}-group-vertical &:first-child {
      &:not(:last-child) {
        border-bottom-color: $btn-group-border;

        &[disabled] {
          border-top-color: $btn-default-border;
        }
      }
    }

    .#{$btn-prefix-cls}-group-vertical &:last-child:not(:first-child),
    .#{$btn-prefix-cls}-group-vertical & + .#{$btn-prefix-cls} {
      border-top-color: $btn-group-border;

      &[disabled] {
        border-bottom-color: $btn-default-border;
      }
    }
  }

  &-ghost {
    @include btn-ghost;
  }

  &-dashed {
    @include btn-dashed;
  }

  &-text {
    @include btn-text;
  }

  /* &-danger{
    @include btn-danger;
  } */

  &-danger {
    @include button-custom($btn-danger-color, $btn-danger-bg, $btn-danger-border);
    border-style: solid;
    border-radius: $btn-border-radius;
    color: $btn-danger-color;
    background-color: $btn-danger-bg;
    border-color: $btn-danger-border;

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

    &:active,
    &.active {
      color: $btn-danger-press-color;
      background-color: $btn-danger-press-bgcolor;
      border-color: $btn-danger-press-border-color;
    }
  }
  /* &-success {
    @include btn-color($success-color);
  } */

  &-success {
    @include button-custom($btn-success-color, $success-color, $success-color);
    border-style: solid;
    border-radius: $btn-border-radius;
    color: $btn-success-color;
    background-color: $btn-success-bg;
    border-color: $btn-success-border;

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

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

  &-warning {
    @include button-custom($btn-warning-color, $warning-color, $warning-color);
    border-style: solid;
    border-radius: $btn-border-radius;
    color: $btn-warning-color;
    background-color: $btn-warning-bg;
    border-color: $btn-warning-border;

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

    &:active,
    &.active {
      color: $btn-warning-press-color;
      background-color: $btn-warning-press-bgcolor;
      border-color: $btn-warning-press-border-color;
    }
  }
  /* &-warning {
    @include btn-color($warning-color);
  } */

  /* &-error {
    @include btn-color($error-color);
  } */

  &-error {
    @include button-custom($btn-error-color, $error-color, $error-color);
    border-style: solid;
    border-radius: $btn-border-radius;
    color: $btn-error-color;
    background-color: $btn-error-bg;
    border-color: $btn-error-border;

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

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

  /* &-info {
    @include btn-color($info-color);
  } */
  &-info {
    @include button-custom($btn-primary-color, $info-color, $info-color);
    border-style: solid;
    border-radius: $btn-border-radius;
    color: $btn-info-color;
    background-color: $btn-info-bg;
    border-color: $btn-info-border;

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

  &-circle,
  &-circle-outline {
    @include btn-circle($btn-prefix-cls);
  }

  &::before {
    position: absolute;
    top: $btn-before-top;
    left: $btn-before-left;
    bottom: $btn-before-bottom;
    right: $btn-before-right;
    background: $btn-before-background;
    opacity: 0.35;
    content: "";
    border-radius: inherit;
    z-index: 1;
    transition: opacity $transition-time;
    pointer-events: none;
    display: none;
  }

  &-loading {
    pointer-events: none;
    position: relative;
    // .icon-loading:before{
    //   display: inline-block;
    //   animation: lRotate 1s infinite linear;
    // }
    &::before {
      display: block;
    }
  }

  &-group {
    @include btn-group($btn-prefix-cls);
  }

  &-group-vertical {
    @include btn-group-vertical($btn-prefix-cls);
  }

  &-transparent {
    @include btn-transparent;
  }
}