@import "./common.wxss";
@import "./reset.wxss";

$deviceWidth: 750;

@function vmin($rpx) {
    @return #{$rpx * 100 / $deviceWidth}vmin;
}

@mixin normal-wrapper {
  width:  vmin(750);
  padding-top: vmin(94);

  .red-packet-top{
    // border-radius: vmin(12) vmin(12) 0 0;
    position: absolute;
    top: 0;
    box-sizing: border-box;
    padding: 0 vmin(32);
    width: 100%;
    height: vmin(96);
    line-height: vmin(96);
    display: flex;
    justify-content: space-between;
    background-image: url("https://wechatapppro-1252524126.cdn.xiaoeknow.com/appAKLWLitn7978/image/b_u_5b2225aa46488_oGKN7IvA/kxssojce0gz9.png?imageView2/2/w/200/q/60");
    background-size: cover;
    color: #fff;

    .left-operate{
      font-size: vmin(28);
      display: flex;
      align-items: center;
      justify-content: center;

      .back_icon{
        width: vmin(40);
        height: vmin(40);
      }

    }

    .record{
      font-size: vmin(36);
    }

    .close{
      display: flex;
      align-items: center;
      justify-content: center;

      .close_icon{
        width: vmin(32);
        height: vmin(32);
      }

    }

  }

  .red-packet-top.vertical{
    border-radius: 0;
  }

  .elive-controls-bottom {
    width: 100%;
    background-color: #F5F6F9;
    box-sizing: border-box;
    /* animation: popping ease 300ms; */
    backdrop-filter: blur(vmin(16));
    height: vmin(844);
  }


  .elive-controls-bottom.vertical{
    height: 100%;
    overflow: hidden;
  }

  .elive-controls-bottom.horizontal{
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
  }

}

@mixin verTiHeight {
  height: calc(100% - #{vmin(422)});
}

@mixin normal-height-ver {
  width: 100%;
  height: calc(100% - #{vmin(96)});
}

.normal-wrapper{
  @include normal-wrapper;
}

.verTiHeight{
  @include verTiHeight;
}

.normal-height-ver {
  @include normal-height-ver
}

// 竖屏pad
@media screen and (min-width: 768px) and (orientation: portrait) {
  $deviceWidth: 1536 !global;

  .normal-wrapper{
    @include normal-wrapper;
  }

  .verTiHeight{
    @include verTiHeight;
  }

  .normal-height-ver {
    @include normal-height-ver
  }

}

// PC 放大适配
@media screen and (min-height: 630px) and (orientation: landscape) {
  $deviceWidth: 1260 !global;

  .normal-wrapper{
    @include normal-wrapper;
  }

  .verTiHeight{
    @include verTiHeight;
  }

  .normal-height-ver {
    @include normal-height-ver
  }

}

// 横屏pad
@media screen and (min-height: 768px) and (orientation: landscape) {
  $deviceWidth: 1536 !global;

  .normal-wrapper{
    @include normal-wrapper;
  }

  .verTiHeight{
    @include verTiHeight;
  }

  .normal-height-ver {
    @include normal-height-ver
  }

}