@charset "UTF-8";
@mixin es-button-type($font-color: #fff, $background-color, $border-color){
  color: $font-color;
  @if($background-color){
    background-color: $background-color;
  }
  border-color: $border-color;
  @content;
}
@mixin es-button-type--status(
  $hf-font-color,
  $hf-background-color,
  $hf-border-color,
  $a-font-color,
  $a-background-color,
  $a-border-color
  ){
    &:hover, &:focus{
      @include es-button-type($hf-font-color, $hf-background-color, $hf-border-color);
      @content;
    }
    &:active{
      @include es-button-type($a-font-color, $a-background-color, $a-border-color);
      @content;
      outline: none;
    }
}
@mixin es-button-type-is-disabled(
  $font-color: #fff,
  $background-color,
  $border-color,
  $hf-font-color,
  $hf-background-color,
  $hf-border-color,
  $a-font-color,
  $a-background-color,
  $a-border-color
){
  @include es-button-type(
    $font-color,
    $background-color,
    $border-color
    ){
    cursor: not-allowed;
    background-image: none;
  };
  @include es-button-type--status(
    $hf-font-color,
    $hf-background-color,
    $hf-border-color,
    $a-font-color,
    $a-background-color,
    $a-border-color
  ){
    cursor: not-allowed;
    background-image: none;
  };
}
.es-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  &--size{
    &--medium {
      padding: 9px 16px;
      font-size: 16px;
      border-radius: 4px;
    }
    &--small {
      padding: 6px 12px;
      font-size: 14px;
      border-radius: 4px;
    }
    &--mini {
      padding: 2px 8px;
      font-size: 14px;
      border-radius: 4px;
    }
  }
  &.is-round {
    border-radius: 20px;
  }
  &.is-circle {
    border-radius: 50%;
    padding: 12px;
  }
  &--text{
    border-color: transparent;
    color: #409eff;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    &.is-disabled{
      color: #c0c4cc;
      cursor: not-allowed;
      background-image: none;
    }
  }
  &--default {
    @include es-button-type(#606266,#fff, #dcdfe6);
    @include es-button-type--status(
      #409eff, #ecf5ff,#c6e2ff,
      #3a8ee6, false,#3a8ee6
    );
    &.is-plain{
      @include es-button-type(#606266,#fff, #dcdfe6);
      @include es-button-type--status(
        #409eff, #fff,#409eff,
        #3a8ee6, false,#3a8ee6
      );
    }
    &.is-disabled{
      @include es-button-type-is-disabled (
        #c0c4cc,#fff, #ebeef5,
        #c0c4cc,#fff, #ebeef5,#c0c4cc,#fff, #ebeef5
      );
    }
  }
  &--primary {
    @include es-button-type(#fff,#409eff, #409eff);
    @include es-button-type--status(
      #fff, #66b1ff,#66b1ff,
      #fff, #3a8ee6,#3a8ee6
    );
    &.is-plain{
      @include es-button-type(#409eff, #ecf5ff, #b3d8ff);
      @include es-button-type--status(
        #fff, #409eff,#409eff,
        #fff, #3a8ee6,#3a8ee6
      );
      &.is-disabled{
        @include es-button-type-is-disabled (
          #8cc5ff, #ecf5ff, #d9ecff,
          #8cc5ff,#ecf5ff, #d9ecff,#8cc5ff,#ecf5ff, #d9ecff
        );
      }
    }
    &.is-disabled{
      @include es-button-type-is-disabled (
        #fff,#a0cfff, #a0cfff,
        #fff,#a0cfff, #a0cfff,#fff,#a0cfff, #a0cfff
      );
    }
  }
  &--success {
    @include es-button-type(#fff,#67c23a, #67c23a);
    @include es-button-type--status(
      #fff, #85ce61,#85ce61,
      #fff, #5daf34,#5daf34
    );
    &.is-plain{
      @include es-button-type(#67c23a, #f0f9eb, #c2e7b0);
      @include es-button-type--status(
        #fff, #67c23a,#67c23a,
        #fff, #5daf34,#5daf34
      );
      &.is-disabled{
        @include es-button-type-is-disabled (
          #a4da89, #f0f9eb, #e1f3d8,
          #a4da89,#f0f9eb, #e1f3d8,#a4da89,#f0f9eb, #e1f3d8
        );
      }
    }
    &.is-disabled{
      @include es-button-type-is-disabled (
        #fff,#b3e19d, #b3e19d,
        #fff,#b3e19d, #b3e19d,#fff,#b3e19d, #b3e19d
      );
    }
  }
  &--info {
    @include es-button-type(#fff,#909399, #909399);
    @include es-button-type--status(
      #fff, #a6a9ad,#a6a9ad,
      #fff, #82848a,#82848a
    );
    &.is-plain{
      @include es-button-type(#909399, #f4f4f5, #d3d4d6);
      @include es-button-type--status(
        #fff, #909399,#909399,
        #fff, #82848a,#82848a
      );
      &.is-disabled{
        @include es-button-type-is-disabled (
          #bcbec2, #f4f4f5, #e9e9eb,
          #bcbec2,#f4f4f5, #e9e9eb,#bcbec2,#f4f4f5, #e9e9eb
        );
      }
    }
    &.is-disabled{
      @include es-button-type-is-disabled (
        #fff,#c8c9cc, #c8c9cc,
        #fff,#c8c9cc, #c8c9cc,#fff,#c8c9cc, #c8c9cc
      );
    }
  }
  &--warning {
    @include es-button-type(#fff,#e6a23c, #e6a23c);
    @include es-button-type--status(
      #fff, #ebb563,#ebb563,
      #fff, #cf9236,#cf9236
    );
    &.is-plain{
      @include es-button-type(#e6a23c, #fdf6ec, #f5dab1);
      @include es-button-type--status(
        #fff, #e6a23c,#e6a23c,
        #fff, #cf9236,#cf9236
      );
      &.is-disabled{
        @include es-button-type-is-disabled (
          #f0c78a, #fdf6ec, #faecd8,
          #f0c78a,#fdf6ec, #faecd8,#f0c78a,#fdf6ec, #faecd8
        );
      }
    }
    &.is-disabled{
      @include es-button-type-is-disabled (
        #fff,#f3d19e, #f3d19e,
        #fff,#f3d19e, #f3d19e,#fff,#f3d19e, #f3d19e
      );
    }
  }
  &--danger {
    @include es-button-type(#fff,#f56c6c, #f56c6c);
    @include es-button-type--status(
      #fff, #f78989,#f78989,
      #fff, #dd6161,#dd6161
    );
    &.is-plain{
      @include es-button-type(#f56c6c, #fef0f0, #fbc4c4);
      @include es-button-type--status(
        #fff, #f56c6c,#f56c6c,
        #fff, #dd6161,#dd6161
      );
      &.is-disabled{
        @include es-button-type-is-disabled (
          #f9a7a7, #fef0f0, #fde2e2,
          #f9a7a7,#fef0f0, #fde2e2,#f9a7a7,#fef0f0, #fde2e2
        );
      }
    }
    &.is-disabled{
      @include es-button-type-is-disabled (
        #fff,#fab6b6, #fab6b6,
        #fff,#fab6b6, #fab6b6,#fff,#fab6b6, #fab6b6
      );
    }
  }
}