.#{$button-prefix-cls} {
  $btn: #{&};
  display: inline-block;
  height: $button-height;
  padding: 0 $button-padding-x;
  appearance: none;
  font-size: $button-font-size;
  line-height: $button-height;
  text-align: center;
  border: none;
  outline: 0 none;
  background-color: #E6EBEE;

  .aid {
    font-size: 0.4rem;
  }

  &--radius {
    border-radius: $border-radius;
  }

  &--loading {
    transform: scale(.7);
    display: inline-block;
  }

  .loading-spanner {
    width: .6rem;
    height: .6rem;
  }

  .loading-spanner:after, .loading-spanner:before, .loading-spanner i:after, .loading-spanner i:before {
    width: .04rem;
    height: .1rem;
    left: 50%;
    transform-origin: 0% .3rem;
  }

  @extend %text-truncate;

  // default
  color: $gray-9;

  // Button variants
  @each $key, $val in $color-status {
    &--#{$key} {
      @include button-variant($white, $val);

      .loading-spanner:after, .loading-spanner:before, .loading-spanner i:after, .loading-spanner i:before {
        box-shadow: 0 0.5rem $white;
      }

      .loading-spanner i:before {
        background: rgba(255, 255, 255, .3);
      }

      .loading-spanner i:after {
        background: rgba(255, 255, 255, .2);
      }

      .loading-spanner:after {
        background: rgba(255, 255, 255, .4);
      }

      .loading-spanner:before {
        background: rgba(255, 255, 255, .5);
      }
    }
  }

  // block
  &--block {
    display: block;
    width: 100%;
  }

  // ghost
  &--ghost {
    //减去边框
    line-height: $button-height - $border-width * 2;

    // default
    @include button-outline-variant($gray-10, $gray-7);

    // white
    &#{$btn}--white {
      @include button-outline-variant($white, $white);
    }

    // variants
    @each $key, $val in $color-status {
      &#{$btn}--#{$key} {
        @include button-outline-variant($val, $val);

        .loading-spanner:after, .loading-spanner:before, .loading-spanner i:after, .loading-spanner i:before {
          box-shadow: 0 0.5rem $val;
        }

        .loading-spanner i:before {
          background: rgba($val, .3);
        }

        .loading-spanner i:after {
          background: rgba($val, .2);
        }

        .loading-spanner:after {
          background: rgba($val, .4);
        }

        .loading-spanner:before {
          background: rgba($val, .5);
        }
      }
    }
  }

  // icon
  &--icon {
    //去除图标(inline-block元素)跟文本之间的默认间隙
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      margin-right: $button-icon-spacer-x;
      font-size: $button-icon-font-size;
    }
  }
}

.button-group {
  display: flex;
  &:not(.bg-white) {
    .btn {
      margin-left: 2px;
      &:first-child {
        margin-left: 0;
      }
      &:not(.btn--block) {
        flex: none;
      }
    }
  }

  &.bg-white {
    height: 1.28rem;
    .btn {
      width: 50%;
      height: 0.88rem;
      line-height: 0.88rem;
      margin: .2rem .3rem;
      &:first-child {
        margin-right: 0.1rem;
      }
      &:last-child {
        margin-left: 0.1rem;
      }
    }
  }
}