.#{$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;
  border-radius: $border-radius;
  outline: 0 none;
  @extend %text-truncate;

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

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

  // 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);
      }
    }
  }

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

  // size
  &--sm {
    height: $button-sm-height;
    padding: 0 $button-sm-padding-x;
    font-size: $button-sm-font-size;
    line-height: $button-sm-height;

    &#{$btn}--ghost {
      line-height: $button-sm-height - $border-width*2;
    }

    &#{$btn}--icon {
      i {
        font-size: $button-sm-icon-font-size;
      }
    }
  }
}
