$en--button-border-radius: 3px;
$en--button-color-white:#ffffff;



@mixin en-btn-property-value($property, $value, $important: false) {
  @if $important == false {
    #{$property}: $value;
  }
  @else {
    #{$property}: $value !important;
  }
}

//通用属性赋值
@mixin en-btn-common-property($property, $value, $defaultValue : none, $defaultValue2 : none, $important: false) {
  @if $value == null {
    @if $defaultValue != null {
      @include en-btn-property-value($property,$defaultValue,$important);
    }
    @else if $defaultValue2 != null {
      @include en-btn-property-value($property,$defaultValue2,$important);
    }
  }
  @else if $value == none {
    @if $property == border-color {
      border-style: none;
    }
    @else if $property == background {
      background: none;
    }
  }
  @else {
    @include en-btn-property-value($property,$value,$important);
  }
}
//颜色
@mixin en-btn-color($color, $defaultValue : none, $defaultValue2 : none, $important: false) {
  @include en-btn-common-property(color,$color,$defaultValue,$defaultValue2,$important);
}
//边框颜色
@mixin en-btn-border-color($border-color, $defaultValue : none, $defaultValue2 : none, $important: false) {
  @include en-btn-common-property(border-color,$border-color,$defaultValue,$defaultValue2,$important);
}
//背景颜色
@mixin en-btn-background-color($bg-color, $defaultValue : none, $defaultValue2 : none, $important: false) {
  @include en-btn-common-property(background,$bg-color,$defaultValue,$defaultValue2,$important);
}

//按钮样式
@each $type,
$color, $border-color, $bg-color,
$color-hover, $border-color-hover, $bg-color-hover,
$color-selected, $border-color-selected, $bg-color-selected,
$color-disabled, $border-color-disabled, $bg-color-disabled
in
                //类型,       【颜色    边框颜色  背景颜色】  【hover颜色 边框颜色  背景颜色】      【selected颜色 边框颜色    背景颜色】    【disabled颜色 边框颜色   背景颜色】
                (blue,        #ffffff, null,    #4694df,    null,    null,     #6fbcf8,       null,         null,     #2c76bd,     #fbfbfb,       null,     #a2c9ef),
                (green,       #ffffff, null,    #26c393,    null,    null,     #4bdb88,       null,         null,     #20b789,     #fbfbfb,       null,     #92e1c9),
                (red,         #ffffff, null,    #f76b6b,    null,    null,     #ff928a,       null,         null,     #ec5353,     #fbfbfb,       null,     #fbb5b5),
                (gray,        #ffffff, null,    #60647d,    null,    null,     #7b7f99,       null,         null,     #4b4e64,     #fbfbfb,       null,     #afb1be),
                (yellow,      #ffffff, null,    #f7bf27,    null,    null,     #edaf06,       null,         null,     #edaf06,     #fbfbfb,       null,     #fbdf93),
                (white,       #636c78, #e8ecf2, #ffffff,    null,    #a2cdf7,  #f5f8fc,       null,         #4694df,  #f5f8fc,     #cdcdcd,       #e8ecf2,  #fbfbfb),
                (custom1,      #ffffff, null,    #4694df,    null,    null,     #6fbcf8,       null,         null,     #2c76bd,     #fbfbfb,       null,     #a2c9ef),

                (text,        #636c78, none,    none,       #6fbcf8, none,     none,          #4694df,      none,     none,        #cdcdcd,       none,     none),

                (blue-text,   #4694df, none,    none,       #6fbcf8, none,     none,          #4694df,      none,     none,        #a2c9ef,       none,     none),
                (green-text,  #26c393, none,    none,       #4bdb88, none,     none,          #20b789,      none,     none,        #92e1c9,       none,     none),
                (red-text,    #f76b6b, none,    none,       #ff928a, none,     none,          #ec5353,      none,     none,        #fbb5b5,       none,     none),
                (gray-text,   #60647d, none,    none,       #7b7f99, none,     none,          #4b4e64,      none,     none,        #afb1be,       none,     none),
                (yellow-text, #f7bf27, none,    none,       #edaf06, none,     none,          #edaf06,      none,     none,        #fbdf93,       none,     none),
                (white-text,  #ffffff, none,    none,       #f5f8fc, none,     none,          #f5f8fc,      none,     none,        #fbfbfb,       none,     none),
{
  .en-button--#{$type} {
    //正常效果
    &.en-btn-normal {
      @include en-btn-color($color);
      @include en-btn-border-color($border-color,$bg-color);
      @include en-btn-background-color($bg-color);
      &:hover {
        @include en-btn-color($color-hover,$color,none,true);
        @include en-btn-border-color($border-color-hover,$bg-color-hover,$bg-color,true);
        @include en-btn-background-color($bg-color-hover,$bg-color,none,true);
      }
      &:active,&:focus {//此处同selected
        @include en-btn-color($color-selected, $color);
        @include en-btn-border-color($border-color-selected, $bg-color-selected, $bg-color,true);
        @include en-btn-background-color($bg-color-selected, $bg-color,none,true);
      }
    }
    //选中效果
    &.en-btn-selected {
      &,&:hover,&:active,&:focus {
        @include en-btn-color($color-selected, $color,none,true);
        @include en-btn-border-color($border-color-selected, $bg-color-selected, $bg-color,true);
        @include en-btn-background-color($bg-color-selected, $bg-color,none,true);
      }
    }
    //禁用效果(不使用el-button  disabled, 效果不一样 并且和selected冲突)
    &.en-btn-disabled {
      &,&:hover,&:active,&:focus {
        cursor: not-allowed;
        @include en-btn-color($color-disabled,$color,none,true);
        @include en-btn-border-color($border-color-disabled,$bg-color-disabled,$bg-color,true);
        @include en-btn-background-color($bg-color-disabled,$bg-color,none,true);
      }
    }
    //选中禁用(新增)
    &.en-btn-selected-disabled {
      //透明度aa
      &,&:hover,&:active,&:focus {
        $en-btn-alpha:aa;
        cursor: not-allowed;
        @include en-btn-color(#{$color-selected}#{$en-btn-alpha},#{$color}#{$en-btn-alpha},none,true);
        @include en-btn-border-color(#{$border-color-selected}#{$en-btn-alpha},#{$bg-color-selected}#{$en-btn-alpha},#{$bg-color}#{$en-btn-alpha},true);
        @include en-btn-background-color(#{$bg-color-selected}#{$en-btn-alpha},#{$bg-color}#{$en-btn-alpha},none,true);
      }
    }
  }
}





.en-button {
  //outline:none;
  //line-height: 1;
  //text-align: center;
  padding: 0 15px;
  font-size: 12px;
  //white-space:nowrap;
  //cursor:pointer;
  //font-weight: 500;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: $en--button-border-radius;
//  box-sizing: border-box;
  border: 1px solid transparent;
  //& + .en-button {
  //  margin-left: 6px;
  //}

  &.is--btn {
    min-width: 72px;
  }

  &.is--round {
    border-radius: 20px;
    //padding: 9px;
  }
  &.is--circle {
    border-radius: 50%;
    padding: 9px;
  }

  &.is--text {
    padding: 0;
    //.en-icon-gap {
    //  margin-right: 2px;
    //}
  }

  .en-icon-svg {
    width: 1em;
    height: 1em;
    //vertical-align: middle;
  }
  .en-icon-gap {
    margin-right: 5px;
  }

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

.el-button + .el-button {
  margin-left: 6px;//enfry 重置element 10px
}
.el-button.is--text + .el-button {
  margin-left: 16px;//enfry 重置element 10px
}

.el-button-group {
  .en-button:not(.en-button--white) {
    &:first-child {
      border-right-color: rgba($en--button-color-white, 0.5);
    }
    &:last-child {
      border-left-color: rgba($en--button-color-white, 0.5);
    }
    &:not(:first-child):not(:last-child) {
      border-left-color: rgba($en--button-color-white, 0.5);
      border-right-color: rgba($en--button-color-white, 0.5);
    }
  }
}


//按钮组
//.el-button-group {
//
//  & > .en-button {
//    float: left;
//    position: relative;
//    & + .en-button {
//      margin-left: 0;
//    }
//    &.is-disabled {
//      z-index: 1;
//    }
//    &:first-child {
//      border-top-right-radius: 0;
//      border-bottom-right-radius: 0;
//      border-right-color: rgba($en--button-color-white, 0.5);
//    }
//    &:last-child {
//      border-top-left-radius: 0;
//      border-bottom-left-radius: 0;
//      border-left-color: rgba($en--button-color-white, 0.5);
//
//    }
//    &:first-child:last-child {
//      border-radius: $en--button-border-radius;
//      border-left-color: rgba($en--button-color-white, 0.5);
//      border-right-color: rgba($en--button-color-white, 0.5);
//
//      &.is-round {
//        border-radius: 20px;
//      }
//
//      &.is-circle {
//        border-radius: 50%;
//      }
//    }
//    &:not(:first-child):not(:last-child) {
//      border-radius: 0;
//    }
//    &:not(:last-child) {
//      margin-right: -1px;
//    }
//
//    &:hover,
//    &:focus,
//    &:active {
//      z-index: 1;
//    }
//
//    //@include when(active) {
//    //  z-index: 1;
//    //}
//  }
//}