@import "../common/varible";
@import "../common/function";
div.yu-button{
  vertical-align: top;
  line-height: $height;
  &.large {
    line-height: $height-large;
  }
  &.small {
    line-height: $height-small;
  }
}

.yu-button {
  font-family: $font-family;
  height: $height;
  font-size: $normal;
  padding: 0 $space;
  margin: 0 $space-small $space 0;
  display: inline-block;
  color: $text;
  box-sizing: border-box;
  border-radius: $radius;
  background-color: #fff;
  border: 1px solid $border;
  cursor: pointer;
  transition: border $transition-time, color $transition-time;
  outline: none;
  &:not(.disabled):hover {
    border: 1px solid $primary;
    color: $primary;
    z-index: 1;
  }
  &:not(.disabled):focus {
    color: $primary;
    border: 1px solid $primary;
  }
  &.disabled {
    color: $text-lighter;
    background: $background;
    cursor: not-allowed;
  }
  @include generalAllColorButton();
  &.circle {
    padding: 0;
    width: $height;
    height: $height;
    border-radius: 50%;
  }
  &.plain {
    &:hover:not(.disabled), &:focus:not(.disabled) {
      border: 1px solid $primary;
      color: $primary;
      background: #fff;
    }
    @include generalAllColorPlainButton();
  }
  &.large {
    padding: 0 $space-large;;
    font-size: $large;
    height: $height-large;
    &.circle {
      padding: 0;
      width: $height-large;
      height: $height-large;
    }
  }
  &.small {
    height: $height-small;
    &.circle {
      padding: 0;
      width: $height-small;
      height: $height-small;
    }
  }

  //隐藏溢出的径向渐变背景
  position: relative;
  overflow: hidden;
  &:not(.disabled):after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    //设置径向渐变
    background-image: radial-gradient(circle, #999 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .4s, opacity .5s;
  }
  &:not(.disabled):active:after {
    transform: scale(0, 0);
    opacity: .3;
    //设置初始状态
    transition: 0s;
  }
}

.yu-button-group {
  font-size: 0;
  & > .yu-button {
    margin-right: -1px;
    float: left;
    position: relative;
    border-radius: 0;
  }
  & > .yu-button:first-child {
    border-radius: $radius 0 0 $radius;
  }
  & > .yu-button:last-child {
    border-radius: 0 $radius $radius 0;
  }
  display: inline-block;
  margin-right: $space-small;
}