// @import "../_utils.scss";
// @import "./icon.scss";

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

  &-long {
    width: 100%;
  }

  .iconfont {
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      line-height: $--size-font-size-base;
    } @else {
      font-size: $font-size-small;
    }
  }
  
  @if $--size-switch == yes {
    &-icon-only .iconfont {
      line-height: $--size-line-height-base;
    }
    &-small.#{$btn-prefix-cls}-icon-only .iconfont {
      line-height: 18px;
    }
  }

  & > .#{$icon-prefix-cls} + span,
  & > span + .#{$icon-prefix-cls} {
    margin-left: 4px;
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
    } @else {
      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;
      // 注入皮肤代理函数
      @include theme-border-right-color($__button-primary_border-color);
      @include theme-border-left-color($__button-primary_border-color);
    }

    .#{$btn-prefix-cls}-group:not(.#{$btn-prefix-cls}-group-vertical) &:first-child {
      &:not(:last-child) {
        border-right-color: $btn-group-border;
        // 注入皮肤代理函数
        @include theme-border-right-color($__button-primary_border-color);

        &[disabled] {
          border-right-color: $btn-default-border;
          // 注入皮肤代理函数
          @include theme-border-right-color($__button_disabled_border-color);
        }
      }
    }

    .#{$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;
      // 注入皮肤代理函数
      @include theme-border-left-color($__button-primary_border-color);

      &[disabled] {
        border-left-color: $btn-default-border;
        // 注入皮肤代理函数
        @include theme-border-left-color($__button_disabled_border-color);
      }
    }

    .#{$btn-prefix-cls}-group-vertical &:not(:first-child):not(:last-child) {
      border-top-color: $btn-group-border;
      border-bottom-color: $btn-group-border;
      // 注入皮肤代理函数
      @include theme-border-top-color($__button-primary_hover_border-color);
      @include theme-border-bottom-color($__button-primary_hover_border-color);
    }

    .#{$btn-prefix-cls}-group-vertical &:first-child {
      &:not(:last-child) {
        border-bottom-color: $btn-group-border;
        // 注入皮肤代理函数
        @include theme-border-bottom-color($__button-primary_border-color);

        &[disabled] {
          border-top-color: $btn-default-border;
          // 注入皮肤代理函数
          @include theme-border-top-color($__button_disabled_border-color);
        }
      }
    }

    .#{$btn-prefix-cls}-group-vertical &:last-child:not(:first-child),
    .#{$btn-prefix-cls}-group-vertical & + .#{$btn-prefix-cls} {
      border-top-color: $btn-group-border;
      // 注入皮肤代理函数
      @include theme-border-top-color($__button-primary_border-color);

      &[disabled] {
        border-bottom-color: $btn-default-border;
        // 注入皮肤代理函数
        @include theme-border-bottom-color($__button_disabled_border-color);
      }
    }
  }

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

    // 从button-custom()中提炼出样式，增加皮肤配色，用以覆盖button-custom()。
    @include theme-color($__button-danger_font-color);
    @include theme-background-color($__button-danger_background-color);
    @include theme-border-color($__button-danger_border-color);
    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;
      // 注入皮肤代理函数
      @include theme-color($__button-danger_hover_font-color);
      @include theme-background-color($__button-danger_background-color);
      @include theme-border-color($__button-danger_hover_border-color);
    }

    &:active,
    &.active {
      color: $btn-danger-press-color;
      background-color: $btn-danger-press-bgcolor;
      border-color: $btn-danger-press-border-color;
      // 注入皮肤代理函数
      @include theme-color($__button-danger_active_font-color);
      @include theme-background-color($__button-danger_background-color);
      @include theme-border-color($__button-danger_active_border-color);
    }
  }
  /* &-success {
    @include btn-color($success-color);
  } */

  &-success {
    @include button-custom($btn-success-color, $success-color, $success-color);

    // 从button-custom()中提炼出样式，增加皮肤配色，用以覆盖button-custom()。
    @include theme-color($__button-success_font-color);
    @include theme-background-color($__button-success_background-color);
    @include theme-border-color($__button-success_border-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;
      // 注入皮肤代理函数
      @include theme-color($__button-success_font-color);
      @include theme-background-color($__button-success_hover_background-color);
      @include theme-border-color($__button-success_hover_border-color);
    }

    &:active,
    &.active {
      color: $btn-success-press-color;
      background-color: $btn-success-press-bgcolor;
      border-color: $btn-success-press-border-color;
      // 注入皮肤代理函数
      @include theme-color($__button-success_font-color);
      @include theme-background-color($__button-success_active_background-color);
      @include theme-border-color($__button-success_active_border-color);
    }
  }

  &-warning {
    @include button-custom($btn-warning-color, $warning-color, $warning-color);

    // 从button-custom()中提炼出样式，增加皮肤配色，用以覆盖button-custom()。
    @include theme-color($__button-warning_font-color);
    @include theme-background-color($__button-warning_background-color);
    @include theme-border-color($__button-warning_border-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;
      // 注入皮肤代理函数
      @include theme-color($__button-warning_font-color);
      @include theme-background-color($__button-warning_hover_background-color);
      @include theme-border-color($__button-warning_hover_border-color);
    }

    &:active,
    &.active {
      color: $btn-warning-press-color;
      background-color: $btn-warning-press-bgcolor;
      border-color: $btn-warning-press-border-color;
      // 注入皮肤代理函数
      @include theme-color($__button-warning_font-color);
      @include theme-background-color($__button-warning_active_background-color);
      @include theme-border-color($__button-warning_active_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);

    // 从button-custom()中提炼出样式，增加皮肤配色，用以覆盖button-custom()。
    @include theme-color($__button-error_font-color);
    @include theme-background-color($__button-error_background-color);
    @include theme-border-color($__button-error_border-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;
      // 注入皮肤代理函数
      @include theme-color($__button-error_font-color);
      @include theme-background-color($__button-error_hover_background-color);
      @include theme-border-color($__button-error_hover_border-color);
    }

    &:active,
    &.active {
      color: $btn-error-press-color;
      background-color: $btn-error-press-bgcolor;
      border-color: $btn-error-press-border-color;
      // 注入皮肤代理函数
      @include theme-color($__button-error_font-color);
      @include theme-background-color($__button-error_active_background-color);
      @include theme-border-color($__button-error_active_border-color);
    }
  }

  /* &-info {
    @include btn-color($info-color);
  } */
  &-info {
    @include button-custom($btn-primary-color, $info-color, $info-color);

    // 从button-custom()中提炼出样式，增加皮肤配色，用以覆盖button-custom()。
    @include theme-color($__button-info_font-color);
    @include theme-background-color($__button-info_background-color);
    @include theme-border-color($__button-info_border-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;
      // 注入皮肤代理函数
      @include theme-color($__button-info_font-color);
      @include theme-background-color($__button-info_hover_background-color);
      @include theme-border-color($__button-info_hover_border-color);
    }

    &:active,
    &.active {
      color: $btn-info-press-color;
      background-color: $btn-info-press-bgcolor;
      border-color: $btn-info-press-border-color;
      // 注入皮肤代理函数
      @include theme-color($__button-info_font-color);
      @include theme-background-color($__button-info_active_background-color);
      @include theme-border-color($__button-info_active_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;
    // 注入皮肤代理函数
    @include theme-background-color($__button-before_background-color);
    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;
  }
}