$deviceWidth: 750;

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

@mixin container-rewards {
    font-family: "PingFangSC-Regular", "PingFang SC";
    position: relative;
    width: calc(100% - 32px);
    background: #e7f4ff;
    border-radius: vmin(8);
    margin: 0 auto;
    z-index: 1;
    margin-bottom: vmin(32);
    padding: 0 vmin(24);
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        height: vmin(112);

        .title {
            font-family: "PingFangSC-Medium", "PingFang SC";
            font-weight: 500;
            font-size: vmin(36);
            background: linear-gradient(90deg, #7b88ff 0%, #7b88ff 30%, #ce7cfd 50%, #fc71cb 100%);
            -webkit-background-clip: text;
            color: transparent;
            margin-right: vmin(8);
            height: vmin(48);
        }

        .status {
            display: inline-flex;
            align-items: center;
            height: vmin(48);
            background-image: linear-gradient(90deg, rgba(255, 50, 149, 0) 0%, #ff9c5c 0%, #ff5cab 53%, #cc5cff 100%);
            border-radius: vmin(22);
            color: #ffffff;
            padding: 0 vmin(16);
            font-size: vmin(24);
        }

        .status.is-gray {
            background: #999999;
        }

        .link-detail {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: vmin(24);
            color: #999999;
            line-height: vmin(34);
            cursor: pointer;
        }

        .new-icon-right {
            width: vmin(36);
            height: vmin(36);
        }
    }

    .reward-detail {
        padding-bottom: vmin(24);

        .reward-list {
            font-size: vmin(24);
            color: #333333;
            background: #ffffff;
            border-radius: vmin(8);
            padding: vmin(24);
            box-sizing: border-box;

            .reward-item {
                display: flex;
                justify-content: space-between;
                margin-top: vmin(32);
                height: vmin(40);

                .name {
                    width: vmin(320);
                    font-family: "PingFangSC-Medium", "PingFang SC";
                    font-weight: 600;
                }

                .ranking {
                    font-family: "PingFangSC-Medium", "PingFang SC";
                    font-weight: 600;
                }
            }

            .reward-item:nth-child(1) {
                margin-top: 0;
            }

            .link-fold {
                margin-top: vmin(18);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #999999;
                height: vmin(32);

                .icon-up {
                    width: vmin(36);
                    height: vmin(36);
                }

                .icon-down {
                    transform: rotate(180deg);
                    width: vmin(36);
                    height: vmin(36);
                }
            }
        }
    }
}

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

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

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

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

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