$deviceWidth: 750;

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

@keyframes popping {
    from {
        transform: translateY(vmin(11.2));
        opacity: 0.5;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@mixin invite-rules {
    animation: popping ease 300ms;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff !important;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 999;
    color: rgba(51, 51, 51, 1);
    font-size: vmin(32);
    font-weight: 500;
    font-family: "PingFang SC";
    text-align: center;
    line-height: vmin(48);
}

@mixin viewAreaPackUp {
    height: calc(100% - 80px);
}

@mixin viewUnPackUp {
    height: 100%;
    width: 100%;
}

@mixin wrapper {
    height: 100%;

    .header {
        height: vmin(96);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(51, 51, 51, 1);
        font-size: vmin(32);
        font-weight: 500;
        font-family: "PingFang SC";
        text-align: center;
        line-height: vmin(48);
    }

    .close-icon {
        position: absolute;
        right: vmin(32);
        top: vmin(32);
        width: vmin(32);
        height: vmin(32);
    }

    .detail {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: vmin(16) vmin(32);
        box-sizing: border-box;
        color: rgba(102, 102, 102, 1);
        font-size: vmin(28);
        font-weight: 400;
        font-family: "PingFang SC";
        text-align: left;
        line-height: vmin(40);

        .detail-header {
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin-bottom: vmin(24);
        }

        .detail-body-one {
            margin-bottom: vmin(8);
        }

        .detail-body-two {
            margin-bottom: vmin(88);
        }
    }

}


.invite-rules {
    @include invite-rules;
}

.viewAreaPackUp {
    @include viewAreaPackUp;
}

.viewUnPackUp {
    @include viewUnPackUp;
}

.wrapper {
    @include wrapper;
}


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

    .invite-rules {
        @include invite-rules;
    }

    .viewAreaPackUp {
        @include viewAreaPackUp;
    }

    .viewUnPackUp {
        @include viewUnPackUp;
    }

    .wrapper {
        @include wrapper;
    }
}

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

    .invite-rules {
        @include invite-rules;
    }

    .viewAreaPackUp {
        @include viewAreaPackUp;
    }

    .viewUnPackUp {
        @include viewUnPackUp;
    }

    .wrapper {
        @include wrapper;
    }
}