// @import '../css/mixins.scss';
@import '../css/mixin.scss';
.yg-button {
  position: relative;
  font-size: 32rpx;
  overflow: hidden;
  border: 1rpx solid transparent;
  display: inline-block;
  padding: 0 18rpx;
  height: 92rpx;
  line-height: 100%;
  &-text {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-primary {
    @include button-style($yg-main-color, $yg-main-color, $yg-white);
    &.yg-hover {
      filter: brightness(0.8);
    }
  }

  &-normal {
    @include button-style($yg-white, $yg-main-color, $yg-main-color);
    &.yg-hover {
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        display: block;
        background-color: $yg-main-color;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        opacity: 0.1;
      }
    }
  }

  &-plain {
    @include button-style($yg-white, #dddddd, #333333);

    &.yg-hover {
      background: #f6f6f6;
      border-color: #dcdee0;
      color: #ccc;
    }
  }

  &-full {
    width: 100%;
    display: block;
  }

  &-m {
    height: 80rpx;
  }

  &-s {
    height: 64rpx;
  }

  &-xs {
    height: 48rpx;
    font-size: 24rpx;
  }

  &-xxs {
    height: 32rpx;
    font-size: 20rpx;
  }

  &-wx {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    z-index: 0;
  }

  .iconfont {
    margin-right: 12rpx;
  }

  &-loading {
    font-size: 40rpx;
    transform: rotate(360deg);
    animation: rotation 3s linear infinite;
  }

  @-webkit-keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }
}