// 尺寸：small、medium、large、maxlarge
// 状态: primary（主要）、secondary(次要)、disabled、warning

@import '../layout/_layout-game-life-vertical.scss';
@import '../var/press-prefix.scss';

//小按钮
@mixin btn-small {
  width: 1.28rem;
  height: .52rem;
  line-height: .52rem;
  box-sizing: border-box;
  display: block;
  text-align: center;
  font-size: $font-s;
  color: #fff;
  border-radius: .08rem;
}

//中按钮
@mixin btn-medium {
  width: 2.92rem;
  height: .68rem;
  line-height: .68rem;
  box-sizing: border-box;
  display: block;
  text-align: center;
  font-size: $font-l;
  color: #fff;
  border-radius: .08rem;
}

//大按钮
@mixin btn-large {
  width: 5.2rem;
  height: .84rem;
  line-height: .84rem;
  box-sizing: border-box;
  display: block;
  text-align: center;
  font-size: $font-l;
  color: #fff;
  border-radius: .12rem;
}

//超大按钮
@mixin btn-maxlarge {
  width: 6.3rem;
  height: .82rem;
  line-height: .82rem;
  box-sizing: border-box;
  display: block;
  text-align: center;
  font-size: $font-l;
  color: #fff;
  border-radius: .12rem;
}

.press-act:not(.press-act--hidden-tip) {

  .#{$TIP_BUTTON_PREFIX}small-primary,
  .#{$PRESS_BUTTON_PREFIX}small-primary,
  &.#{$PRESS_BUTTON_PREFIX}small-primary {
    @include btn-small;
    background-image: linear-gradient(90deg, #50abff 0%, #6e61ff 50%, #925fff 100%);
  }

  .#{$TIP_BUTTON_PREFIX}small-secondary,
  .#{$PRESS_BUTTON_PREFIX}small-secondary,
  &.#{$PRESS_BUTTON_PREFIX}small-secondary {
    @include btn-small;
    background-image: linear-gradient(90deg, #50abff 0%, #6e61ff 50%, #925fff 100%);
    opacity: .5;
  }

  .#{$TIP_BUTTON_PREFIX}small-disabled,
  .#{$PRESS_BUTTON_PREFIX}small-disabled,
  &.#{$PRESS_BUTTON_PREFIX}small-disabled {
    @include btn-small;
    background-color: #ccc;
  }

  .#{$TIP_BUTTON_PREFIX}medium-primary,
  .#{$PRESS_BUTTON_PREFIX}medium-primary,
  &.#{$PRESS_BUTTON_PREFIX}medium-primary {
    @include btn-medium;
    background-image: linear-gradient(90deg, #50abff 0%, #6e61ff 50%, #925fff 100%);
  }

  .#{$TIP_BUTTON_PREFIX}medium-secondary,
  .#{$PRESS_BUTTON_PREFIX}medium-secondary,
  &.#{$PRESS_BUTTON_PREFIX}medium-secondary {
    @include btn-medium;
    color: $color-blue-2;
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #50abff 0, #6e61ff 50%, #925fff 100%);
  }

  .#{$TIP_BUTTON_PREFIX}medium-disabled,
  .#{$PRESS_BUTTON_PREFIX}medium-disabled,
  &.#{$PRESS_BUTTON_PREFIX}medium-disabled {
    @include btn-medium;
    background-color: #ccc;
  }

  .#{$TIP_BUTTON_PREFIX}large-primary,
  .#{$PRESS_BUTTON_PREFIX}large-primary,
  &.#{$PRESS_BUTTON_PREFIX}large-primary {
    @include btn-large;
    background-image: linear-gradient(90deg, #50abff 0%, #6e61ff 50%, #925fff 100%);
  }

  .#{$TIP_BUTTON_PREFIX}large-secondary,
  .#{$PRESS_BUTTON_PREFIX}large-secondary,
  &.#{$PRESS_BUTTON_PREFIX}large-secondary {
    @include btn-large;
    color: $color-blue-2;
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #50abff 0, #6e61ff 50%, #925fff 100%);
  }

  .#{$TIP_BUTTON_PREFIX}large-disabled,
  .#{$PRESS_BUTTON_PREFIX}large-disabled,
  &.#{$PRESS_BUTTON_PREFIX}large-disabled {
    @include btn-large;
    background-color: #ccc;
  }

  .#{$TIP_BUTTON_PREFIX}maxlarge-primary,
  .#{$PRESS_BUTTON_PREFIX}maxlarge-primary,
  &.#{$PRESS_BUTTON_PREFIX}maxlarge-primary {
    @include btn-maxlarge;
    background-image: linear-gradient(90deg, #50abff 0%, #6e61ff 50%, #925fff 100%);
  }

  .#{$TIP_BUTTON_PREFIX}maxlarge-secondary,
  .#{$PRESS_BUTTON_PREFIX}maxlarge-secondary,
  &.#{$PRESS_BUTTON_PREFIX}maxlarge-secondary {
    @include btn-maxlarge;
    color: $color-blue-2;
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #50abff 0, #6e61ff 50%, #925fff 100%);
  }

  .#{$TIP_BUTTON_PREFIX}maxlarge-disabled,
  .#{$PRESS_BUTTON_PREFIX}maxlarge-disabled,
  &.#{$PRESS_BUTTON_PREFIX}maxlarge-disabled {
    @include btn-maxlarge;
    background-color: #ccc;
  }
}