.#{$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;
  @extend %text-truncate;

  // default
  @include button-variant($gray-9, $button-bg);

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

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

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

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

  &--disabled,
  &[disabled],
  &:disabled,
  &[readonly] {
    background-color: $bg-color;
    color: $gray-11;
    border:$border-width solid $bg-color;
  }
}

.btn--group {
  display: flex;
  height: $button-group-height;
  justify-content: space-between;
  background-color: $button-group-bg;
  padding: 0 .3rem;
  .#{$button-prefix-cls} {
    width: calc(50% - .1rem);
    margin: .2rem 0;
  }
}