@import "./var.less";
.ix-button{
  border: @border;
  color: @fontColor;
  background: #fff;
  border-radius: @border-radius;
  padding: 10px 16px;
  font-size: @fontSize;
  cursor: pointer;
  transition: all .3s;
  line-height: 1;
  white-space: nowrap;
  -webkit-appearance: none;
  outline: none;
  &:hover{
    background: @theme-low;
    border-color: @theme;
    &.ix-plain{
      color: @theme;
      border-color: @theme;
    }
  }
  &.ix-primary{
    color: #fff;
    background: @theme;
    border-color: @theme;
    &:hover{
      background: fade(@theme, 85)
    }
    &.ix-plain{
      color: @theme;
      border-color: @theme;
      background: #fff;
      &:hover{
        color: #fff;
        background: @theme;
        border-color: @theme;
      }
    }
  }
  &.ix-success{
    color: #fff;
    background: @color-success;
    border-color: @color-success;
    &:hover{
      background: fade(@color-success, 90%)
    }
    &.ix-plain{
      color: @color-success;
      border-color: @color-success;
      background: #fff;
      &:hover{
        color: #fff;
        background: @color-success;
        border-color: @color-success;
      }
    }
  }
  &.ix-info{
    color: #fff;
    background: @color-info;
    border-color: @color-info;
    &:hover{
      background: fade(@color-info, 90%)
    }
    &.ix-plain{
      color: @color-info;
      border-color: @color-info;
      background: #fff;
      &:hover{
        color: #fff;
        background: @color-info;
        border-color: @color-info;
      }
    }
  }
  &.ix-warning{
    color: #fff;
    background: @color-warning;
    border-color: @color-warning;
    &:hover{
      background: fade(@color-warning, 90%)
    }
    &.ix-plain{
      color: @color-warning;
      border-color: @color-warning;
      background: #fff;
      &:hover{
        color: #fff;
        background: @color-warning;
        border-color: @color-warning;
      }
    }
  }
  &.ix-danger{
    color: #fff;
    background: @color-danger;
    border-color: @color-danger;
    &:hover{
      background: fade(@color-danger, 90%)
    }
    &.ix-plain{
      color: @color-danger;
      border-color: @color-danger;
      background: #fff;
      &:hover{
        color: #fff;
        background: @color-danger;
        border-color: @color-danger;
      }
    }
  }
  &.ix-round{
    border-radius: 30px;
  }
  &.ix-circle{
    border-radius: 50%;
    padding: 10px;
  }
  &.ix-group{
    border-radius: 0;
  }
  &.ix-group:first-child{
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
  }
  &.ix-group:last-child{
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
  }
  &.ix-medium{
    padding: 8px 10px;
    font-size: 13px;
  }
  &.ix-small{
    padding: 5px 7px;
    font-size: 13px;
  }
  &.ix-mini{
    padding: 2px 4px;
    font-size: 12px;
  }
  &.ix-text{
    color: @theme;
    background: none;
    border: none;
    padding-left: 0;
    padding-right: 0;
    &:hover{
      color: fade(@theme, 90%)
    }
  }
}
.ix-button+.ix-button{
  margin-left: 6px;
}
.ix-button.ix-group+.ix-button.ix-group{
  margin-left: 0;
}
.ix-button.ix-group-0+.ix-button.ix-group-0{
  margin-left: -1px;
}
.ix-button.ix-group-1+.ix-button.ix-group-1{
  margin-left: 1px;
}