.button {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 0 80px;
  height: 72px;
  border: 1px solid $color_main;
  background-color: #fff;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  &--normal {
    height: 72px;
    font-size: $font_size_medium;
  }
  &--small {
    height: 60px;
    font-size: $font_size_min;
  }
  &--disabled {
    opacity: $opacity-disabled;
  }
  // 按钮类型
  &--primary {
    border: 1px solid $color_main;
    background-color: $color_main;
    color: white;
  }
  &--danger {
    border: 1px solid $color_danger;
    background-color: $color_danger;
    color: white;
  }
  &--warning {
    border: 1px solid $color_warning;
    background-color: $color_warning;
    color: white;
  }
  &--info {
    border: 1px solid $color_info;
    background-color: $color_info;
    color: white;
  }
  &--round {
    border-radius: 50px;
  }
  &--circle {
    border-radius: 16px;
  }
  // 朴素按钮
  &--plain {
    background-color: white;
    &.button--primary {
      border: 1px solid $color_main;
      color: $color_main;
    }
    &.button--danger {
      border: 1px solid $color_danger;
      color: $color_danger;
    }
    &.button--warning {
      border: 1px solid $color_warning;
      color: $color_warning;
    }
    &.button--info {
      border: 1px solid $color_info;
      color: $color_info;
    }
  }
  &--text {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    color: currentColor;
  }
  // active 伪类
  &--primary:active {
    background-color: rgba($color: $color_main, $alpha: 0.5);
    color: #fff;
  }
  &--danger:active {
    background-color: rgba($color: $color_danger, $alpha: 0.5);
    color: #fff;
  }
  &--warning:active {
    background-color: rgba($color: $color_warning, $alpha: 0.5);
    color: #fff;
  }
  &--info:active {
    background-color: rgba($color: $color_info, $alpha: 0.5);
    color: #fff;
  }
}