$deviceWidth: 750;

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

/*  封面图  */
@mixin lottery-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: vmin(72);
    border-radius: vmin(16);

    &.full-screen {
        background: rgba(0, 0, 0, 0.2);
    }

    &.vertical-screen {
        margin: 0 vmin(32) vmin(32) 0;
    }

    &.vertical-pull-screen {
        background: rgba(0, 0, 0, 0.2);
        margin: 0 0 vmin(32) 0;
    }

    z-index: 203;

    .icon-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: vmin(72);
        height: vmin(72);
        border-radius: 50%;

        .icon {
            width: vmin(64);
            height: vmin(68);
        }
    }

    .countdown-box {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -8px;
        padding: 0 4px;
        min-width: vmin(64);
        height: vmin(24);
        border-radius: vmin(12);
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        font-size: vmin(16);
        font-weight: 500;
    }
}

.lottery-fab {
    @include lottery-fab;
}

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

    .lottery-fab {
        @include lottery-fab;
    }
}

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

    .lottery-fab {
        @include lottery-fab;
    }
}

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

    .lottery-fab {
        @include lottery-fab;
    }
}