@charset "UTF-8";
@import "common/var";
@import "mixins/mixins";
@import "mixins/utils";

@include b(button-group) {
  display: inline-block;
  vertical-align: middle;
  & + & {
    margin-left: 32px;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
  &:before{
    display: table;
    content: "";
  }
  &::after{
    clear: both;
    display: table;
    content: "";
  }
  >.el-button:not(:last-child) {
    margin-right: -1px;
  }
  >.el-button:first-child{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  >.el-button{
    float: left;
    position: relative;
    // padding-left: 12px;
    // padding-right: 12px;
    & span {
      & + [class*="el-icon-"] {
        vertical-align: top;
      }
    }
  }
  .el-button--large:not(.is-icon){
    padding: 10px 19px;
  }

  .el-button--primary:last-child{
    border-left-color: hsla(0,0%,100%,.5);
    border-width: $--border-width-base;
    border-style: $--border-style-base;
    border-left: $--border-width-base $--border-style-base rgba(255,255,255,.3)!important;
    border-top-color: $--color-transparent;
    border-bottom-color: $--color-transparent;
    border-right-color: $--color-transparent;
    background: $--color-info;
    color: $--color-white;
  }
  >.el-button:last-child{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .el-button--primary:not(:first-child):not(:last-child) {
    border-left-color: hsla(0,0%,100%,.3);
    border-right-color: hsla(0,0%,100%,.3);
  }
  .el-button--primary{
    background: $--color-info;
    color: $--color-white;
    border: $--border-width-base $--border-style-base $--color-transparent;
  }
  
  >.el-button:not(:first-child):not(:last-child){
    border-radius: 0;
  }
  .el-button--secondary:last-child{
    // border-width: $--border-width-base $--border-style-base $--color-transparent;
    border-left: $--border-width-base solid $--button--secondary-border-left-color;
    // border-left-color: $--button--secondary-border-left-color;
  }
  .el-button--secondary:not(:first-child):not(:last-child) {
    border-left-color: hsla(0,0%,100%,.3);
    border-right-color: hsla(0,0%,100%,.3);
  }
  .el-button--primary {
    &[color~="linear"]{
      background: $--color-primary;
      border-color: $--primary-6;
      color: $--color-white;
    }
    &:hover {
      border-color: $--primary-5;
      background-color: $--primary-5;
    }
    &:active {
      border-color: $--primary-7;
      background-color: $--primary-7;
    }
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        background-color: $--primary-3;
        border-color: $--primary-3;
        color: $--button-disabled-font-color;
      }
    }
    &.is-disabled[color~="plain"] {
      color: $--button-plain-disabled-font-color;
      background: $--button-plain-disabled-background-color;
      border-color: $--button-plain-disabled-border-color;
    }
  }
}