$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 container-friends {
    animation: popping ease 300ms;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #fff !important;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 999;
}

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

@mixin viewUnPackUp {
    height: 100%;
}

@mixin wrapper {
    height: 100%;

    .header {
        height: vmin(96);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: vmin(32);
        color: #333333;
        text-align: center;
        font-weight: 700;
        font-family: "PingFang SC";
        line-height: vmin(48);
    }

    .invite-num-rules {
        width: 100%;
        height: vmin(72);
        padding: vmin(16) vmin(42) vmin(16) vmin(32);
        margin-bottom: vmin(24);
        box-sizing: border-box;
        display: flex;
        color: #333333;
        font-size: vmin(28);
        font-weight: 500;
        text-align: left;
        font-family: "PingFang SC";
        line-height: vmin(40);
        position: relative;

        .num {
            color: #FF781F;
        }

        .rules {
            position: absolute;
            top: vmin(16);
            right: vmin(42);
            color: #1472FF;
        }
    }

    .count-style {
        color: rgba(50, 50, 51, 1);
        font-size: vmin(28);
        font-weight: 700;
        text-align: center;
        line-height: vmin(40);
    }

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

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

    .detail {
        padding: vmin(32);
    }

    .friend-list {
        min-height: calc(100% - 90px);
        overflow: scroll;
        padding: 0 vmin(34) vmin(16) vmin(36);
        box-sizing: border-box;

        .friend-item {
            float: left;
            text-align: center;
            width: vmin(136);
            height: vmin(152);
            margin-bottom: vmin(40);
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: flex-start;
            flex: auto;
        }

        .img-avatar {
            width: vmin(96);
            height: vmin(96);
            border-radius: 100%;
        }

        .name {
            margin-top: vmin(12);
            font-family: PingFangSC-Medium;
            font-size: vmin(24);
            color: #333333;
            text-align: center;
            max-width: vmin(96);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .finished-text {
        text-align: center;
        font-size: vmin(24);
        color: #999999;
        height: 40px;
        line-height: 40px;
    }
}

.container-friends {
    @include container-friends;
}

.viewAreaPackUp {
    @include viewAreaPackUp;
}

.viewUnPackUp {
    @include viewUnPackUp;
}

.wrapper {
    @include wrapper;
}


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

    .container-friends {
        @include container-friends;
    }

    .viewAreaPackUp {
        @include viewAreaPackUp;
    }

    .viewUnPackUp {
        @include viewUnPackUp;
    }

    .wrapper {
        @include wrapper;
    }
}

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

    .container-friends {
        @include container-friends;
    }

    .viewAreaPackUp {
        @include viewAreaPackUp;
    }

    .viewUnPackUp {
        @include viewUnPackUp;
    }

    .wrapper {
        @include wrapper;
    }
}