// @import '../css/mixins.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;
    white-space: nowrap;
  }

  &-primary {
    background: var(--yg-main-color);
    border-color: transparent;
    color: $yg-white;

    &.yg-hover {
      filter: brightness(0.8);
    }

    &.disabled {
      opacity: 0.3;
    }
  }

  &-normal {
    background: $yg-white;
    border-color: var(--yg-main-color);
    color: var(--yg-main-color);

    &.disabled {
      opacity: 0.3;
    }

    &.yg-hover {
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        display: block;
        background-color: var(--yg-main-color);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        opacity: 0.1;
      }
    }
  }

  &-plain {
    background: $yg-white;
    border-color: #dddddd;
    color: #333333;

    &.disabled {
      opacity: 0.3;
    }

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

  &-active {
    color: var(--yg-main-color);
    border-color: transparent;

    &::after {
      content: '';
      width: 100%;
      height: 100%;
      display: block;
      background-color: var(--yg-main-color);
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      opacity: 0.1;
    }
  }

  &-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: 36rpx;
    transform: rotate(360deg);
    animation: rotation 3s linear infinite;
  }

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

    to {
      -webkit-transform: rotate(360deg);
    }
  }
}