@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_video {
    position: relative;
    font-size: 0;
    height: 0;
    width: 100%;
    &.nu_video-aspect,.nu_video-aspect {
        padding-top: 100%;
    }
    .nu_video{
        height: 100%;
        width: 100%;
    }
    &.nu_video-cont,.nu_video-cont{
        padding-top: 56.25%;
    }
    .nu_contain{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .nu_video-wrap {
        display: none;
        position: relative;
    }
    .nu_video-close {
        background: #ccc;
        font-size: 14px;
        padding: 2px;
        position: absolute;
        right: 100%;
        top: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        display: none;
        align-items: center;
        justify-content: center;
        @include iconPadding();
    }
    .nu_video-pic{
        &::after {
            content: '';
            position: absolute;
            left: 0;
            top:0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,.5);
        }
    }
    &.nu_video-hide {
        &.nu_video-play {
            .nu_video-wrap{
                right: 0;
                top:0;
                position: fixed;
                width: 48%;
                transform: translateZ(0);
                z-index: 101;
                max-width: 520px;
            }
        }
        .nu_video-close{
            display: flex;
        }
    }
    &.nu_video-play {
        .nu_contain{
            background: #000;
        }
        .nu_aspect-cont{
            position: relative;
            display: inline-block;
            &:before {
                content: '';
                position: absolute;
                opacity: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                background: rgba(0,0,0,.01);
                display: inline-block;
                animation: nu_spinner-spin-show .5s linear .5s infinite both;
            }

            &:before {
                top: 0;
                left: 0;
            }
        }
    }
    &.nu_video-active {
        .nu_video-pic {
            display: none;
        }
        .nu_video-wrap{
            display: block;
        }
    }
    @keyframes nu_spinner-spin-show {
        0%{
            opacity: 0;
        }
        100%{
            opacity: .1;
        }
    }
}