// @include b(button) {
//   &:hover,
//   &:focus {
//     color: #1890FF;
//     border-color: $--color-primary-light-7;
//     background-color: rgba(24,144,255,0.1);
//     border: 1px solid rgba(24,144,255,0.1);
//   }

//   &:active {
//     color: #ffffff;
//     background: linear-gradient(#73b6f6, #1890ff);
//     outline: none;
//   }

//   &::-moz-focus-inner {
//     border: 0;
//   }

//   & [class*="el-icon-"] {
//     & + span {
//       margin-left: 5px;
//     }
//   }
// }

@include b(button) {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: $--button-default-background-color;
  border: $--border-base;
  border-color: $--button-default-border-color;
  color: $--button-default-font-color;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: $--button-font-weight;
  @include utils-user-select(none);

  &+& {
    margin-left: 10px;
  }

  @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);

  &:hover,
  &:focus {
    color: $--color-primary;
    border-color: $--color-primary-light-9; //$--color-primary-light-7;
    background-color: $--color-primary-light-9;
  }

  &:active {
    color: #FFFFFF;
    border-color: linear-gradient(#8BD7CE, #1F7C72);
    background: linear-gradient(#8BD7CE, #1F7C72);
    outline: none;
  }

  &::-moz-focus-inner {
    border: 0;
  }

  & [class*="el-icon-"] {
    &+span {
      margin-left: 5px;
    }
  }

  @include when(plain) {

    &:hover,
    &:focus {
      background: $--color-white;
      border-color: $--color-primary;
      color: $--color-primary;
      border-width: 1px;
    }

    &:active {
      background: $--color-white;
      border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
      outline: none;
      border-width: 1px;
    }
  }

  @include when(active) {
    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
  }

  @include when(disabled) {

    &,
    &:hover,
    &:focus {
      color: $--button-disabled-font-color;
      cursor: not-allowed;
      background-image: none;
      background-color: $--button-disabled-background-color;
      border-color: $--button-disabled-border-color;
    }

    &.el-button--text {
      background-color: transparent;
    }

    &.is-plain {

      &,
      &:hover,
      &:focus {
        background-color: $--color-white;
        border-color: $--button-disabled-border-color;
        color: $--button-disabled-font-color;
      }
    }
  }

  @include when(loading) {
    position: relative;
    pointer-events: none;

    &:before {
      pointer-events: none;
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      background-color: rgba(255, 255, 255, .35);
    }
  }

  @include when(round) {
    border-radius: 20px;
    padding: 10px 10px;
  }

  @include when(circle) {
    border-radius: 50%;
    padding: $--button-padding-vertical;
  }

  @include m(main) {
    //@include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
    color: $--color-white;
    background: linear-gradient(#73b6f6, #1890ff);
    border: 1px solid transparent;
    border-color:transparent;
    &:hover,
    &:focus {
      background: linear-gradient(#8ec5f8, #47a6ff);
      // border-color: $--button-disabled-font-color;
      border-color:transparent;
      color: $--color-white;
    }

    &:active {
      background: linear-gradient(#66a4dd, #1782e5);
      color: $--color-white;
      // border-color: $--button-disabled-font-color;
      border-color:transparent;
      outline: none;
    }

    &.is-active {
      background: linear-gradient(#66a4dd, #1782e5);
      color: $--color-white;
    }

    &.is-disabled {

      &,
      &:hover,
      &:focus,
      &:active {
        color: $--color-text-placeholder;
        background-color: $--border-color-base;
        border-color: $--border-color-base;
      }
    }

    &.is-plain {
      @include button-plain($--button-primary-background-color);
    }
  }

  @include m(main1) {
    //@include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
    color: $--button-default-font-color;
    border: 1px solid transparent;
    background: #E4F1FC;

    &:hover,
    &:focus {
      background: $--button-default-font-color;
      color: $--color-white;
    }

    &:active {
      background: #1681E5;
      color: $--color-white;
      outline: none;
    }

    &.is-active {
      background: #1681E5;
      color: $--color-white;
    }

    &.is-disabled {

      &,
      &:hover,
      &:focus,
      &:active {
        color: $--color-text-placeholder;
        background-color: $--border-color-base;
        border-color: $--border-color-base;
      }
    }

    &.is-plain {
      @include button-plain($--button-primary-background-color);
    }
  }

  @include m(primary) {
    //@include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
    color: $--color-white;
    border: 1px solid transparent;
    background: #23AD9E;

    &:hover,
    &:focus {
      background: #13A393;
      color: $--color-white;
    }

    &:active {
      background: #13A393;
      color: $--color-white;
      outline: none;
    }

    &.is-active {
      background: #13A393;
      color: $--color-white;
    }

    &.is-disabled {

      &,
      &:hover,
      &:focus,
      &:active {
        color: $--color-text-placeholder;
        background-color: $--border-color-base;
        border-color: $--border-color-base;
      }
    }

    &.is-plain {
      @include button-plain($--button-primary-background-color);
    }
  }

  @include m(dashed) {
    color: #999999;
    background: transparent;
    border: 1px dashed rgba(190,190,190,0.5);

    &:hover,
    &:focus {
      // background: #FCFCFC;
      border: 1px dashed rgba(24,144,255,0.5);
      color:#1890FF;
    }

    &:active {
      // background: mix($--color-black, $background-color, $--button-active-shade-percent);
      background: transparent;
      border-color:rgba(24,144,255,1);
      color: #1890FF;
      outline: none;
    }

    &.is-active {
      background: transparent;
      border-color:rgba(24,144,255,1);
      color: #1890FF;
    }

    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: $--color-text-placeholder;
        background-color: $--border-color-base;
        border-color: $--border-color-base;
      }
    }

    &.is-plain {
      //@include button-plain($--button-background-color);
    }
  }

  @include m(success) {
    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
  }

  @include m(warning) {
    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
  }

  @include m(danger) {
    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
  }

  @include m(info) {
    //@include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
    color: $--button-info-font-color;
    border-color:$--button-info-border-color;
    background: $--color-white;

    &:hover,
    &:focus {
      background: #F3F3F3;
      color: #333333;
    }

    &:active {
      background:rgba(23,20,20,0.1);
      color: #333333;
      outline: none;
    }

    &.is-active {
      background:rgba(23,20,20,0.1);
      color: #333333;
      color: $--color-white;
    }

    &.is-disabled {

      &,
      &:hover,
      &:focus,
      &:active {
        color: $--color-text-placeholder;
        background-color: $--border-color-base;
        border-color: $--border-color-base;
      }
    }

    &.is-plain {
      @include button-plain(#BEBEBE);
    }
  }

  @include m(medium) {
    @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);

    @include when(circle) {
      padding: $--button-medium-padding-vertical;
    }
  }

  @include m(small) {
    @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);

    @include when(circle) {
      padding: $--button-small-padding-vertical;
    }
  }

  @include m(mini) {
    @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);

    @include when(circle) {
      padding: $--button-mini-padding-vertical;
    }
  }

  @include m(text) {
    border-color: transparent;
    color: $--color-primary;
    background: transparent;
    padding-left: 0;
    padding-right: 0;

    &:hover,
    &:focus {
      color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
      border-color: transparent;
      background-color: transparent;
    }

    &:active {
      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
      border-color: transparent;
      background-color: transparent;
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:focus {
      border-color: transparent;
    }
  }
}