/* associate/alive_pusher/components/invite-poster2/invite-poster2.wxss */

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

.poster {
    width: 100%;
    height: 100vh;
    z-index: 2;
    position: fixed;
    top: 0;
    left: 0;
    /* background-color: rgba(0, 0, 0, 0.6); */
}
.poster-wrap {
    width: 100%;
    height: vmin(384);
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: vmin(16) vmin(16) 0 0;
    backdrop-filter: blur(16px);
    animation: popping ease 300ms;
}
@keyframes popping {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}
.poster-header {
    height: vmin(176);
    color: #333;
    font-family: PingFangSC-Medium;
    font-size: vmin(32);
    color: #FFFFFF;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.close-icon-view {
    width: vmin(60);
    height: vmin(60);
    position: absolute;
    top: vmin(64);
    right: vmin(30);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mask-layer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #ffffff;
    opacity: 0;
}
.poster-header_icon {
    width: vmin(48);
    height: vmin(48);
}
.header-text {
    font-size: vmin(36);
    height: vmin(40);
    line-height: vmin(40);
    color: #FFFFFF;
}
.poster-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: vmin(16);
}
.poster-content_image {
    width: vmin(420);
    height: vmin(736);
    border-radius: vmin(16);
    background-color: #D1E3FF;
}
.poster-list {
    padding: 8rpx vmin(68) 8rpx 0;
    position: relative;
}
.scroll-view {
    width: 100%;
    position: relative;
    white-space: nowrap;
}
.poster-item {
    width: vmin(68);
    height: vmin(120);
    border-radius: vmin(12);
    margin-left: vmin(32);
    background-color: #D1E3FF;
    display: inline-block;
}
.poster-list_mask {
    width: vmin(64);
    height: vmin(152);
    position: absolute;
    top: 0;
    right: 0;
    background: #FFFFFF;
    box-shadow: -8px 0px 8px -8px rgba(0, 0, 0, 0.3);
}
.poster-bottom {
    display: flex;
    padding-bottom: constant(safe-area-inset-bottom);
    /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom);
    /*兼容 IOS>11.2*/
}
.bottom-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: vmin(28);
}
.bottom-item .view {
    height: vmin(36);
    margin-top: vmin(16);
    background-color: #FFFFFF;
    font-size: vmin(24);
}
.bottom-item-text {
    height: vmin(36);
    margin-top: vmin(16);
    font-size: vmin(24);
}
.bottom-item_img {
    width: vmin(100);
    height: vmin(100);
    border-radius: 50%;
}
.share-btn {
    width: vmin(100);
    height: vmin(100);
    border-radius: 50%;
    padding: 0;
}
.active-poster {
    border: 2px solid #1472FF;
}
.cancel-btn {
    width: 100%;
    height: vmin(96);
    background: #FFFFFF;
    color: #000000;
    font-size: vmin(28);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: vmin(68);
}
.blank-view {
    position: absolute;
    bottom: 0;
    height: vmin(68);
    width: 100%;
    background: #FFFFFF;
}