@import "./mixins/_commons";
@import "./mixins/_button";

.el-button{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background-color: $button-default-fill;
  border:$border-base;
  color:$button-default-color;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  @include button-size($button-padding-vertical,$button-padding-horizontal,$button-font-size,$button-border-radius);

  &:hover{
    color:$color-primary;
    border-color:$color-primary;
  }
  
  &:active{
    color: $color-primary;
    border-color:$color-primary;
    outline:none;
  }

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

  & .el-icon-right{
    margin-left: 5px;
  }

  & .el-icon-left{
    margin-right: 5px;
  }

  & [class*='el-icon-']{

    & + span{
      margin-left: 5px;
    }

  }

  &.is-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);
    }
  }

  &.is-disabled,
  &.is-disabled:hover{
    color:$button-disabled-color;
    cursor: not-allowed;
    background-image: none;
    background-color: $button-disabled-fill;
    border-color:$button-disabled-border;

    &.is-plain,
    &.is-plain:hover{
      background-color: $color-white;
      border-color:$button-disabled-border;
      color:$button-disabled-color;
    }
  }

  &.is-active{
    color:$color-primary;
    border-color:$color-primary;
  }

  &.is-plain{

    &:hover{
      background: $color-white;
      border-color: $color-primary;
      color:$color-primary;
    }

    &:active{
      background: $color-white;
      border-color:$color-primary;
      color:$color-primary;
      outline: none;
    }

  }
}

.el-button-primary{
  @include button-style($button-primary-color,$button-primary-fill,$button-primary-border);
}

.el-button-success{
  @include button-style($button-success-color,$button-success-fill,$button-success-border);
}

.el-button-warning{
  @include button-style($button-warning-color,$button-warning-fill,$button-warning-border);
}

.el-button-danger{
  @include button-style($button-danger-color,$button-danger-fill,$button-danger-border);
}

.el-button-info{
  @include button-style($button-info-color,$button-info-fill,$button-info-border);
}

.el-button-text{
  border:none;
  color:$color-primary;
  background: transparent;

  &:hover{
    color:lighten($color-primary,$button-hover-tint-percent);
  }

  &:active{
    color:darken($color-primary,$button-active-shade-percent);
  }

}

.el-button-large{
  @include button-size($button-large-padding-vertical,$button-large-padding-horizontal,$button-large-font-size,$button-border-radius);
}

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

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

.el-button-group{
  display: inline-block;

  @include clearfix;

  & .el-button{
    float:left;
    position: relative;

    &:first-child{
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child{
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:first-child):not(:last-child){
      border-radius: 0;
    }

    &:not(:last-child){
      margin-right: -1px;
    }

    &:hover,
    &:active{
      z-index: 1;
    }

    &.is-active{
      z-index: 1;
    }
  }

  @each $type in (primary success warning danger info){
    .el-button-#{$type} {

      &:first-child{
        border-right-color: rgba(#fff,0.5);
      }

      &:last-child{
        border-left-color: rgba(#fff,0.5);
      }

      &:not(:first-child):not(:last-child){
        border-left-color: rgba(#fff,0.5);
        border-right-color: rgba(#fff,0.5);
      }
    }
  }

}

.el-button+.el-button{
  margin-left: 10px;
}