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

@mixin popupAlign() {
    .nus_popup{
        &.nu_align{
            @at-root #{&}-bottom{
                .nu_content-wrap{
                    bottom: -1px;
                    width: 100%;
                }
                &.nu_hide-mask{
                    top: auto;
                    .nu_content-wrap{
                        position: relative;
                    }
                }
            }
            @at-root #{&}-top{
                .nu_content-wrap{
                    top: 0;
                    width: 100%;
                }
                &.nu_hide-mask{
                    bottom: auto;
                    .nu_content-wrap{
                        position: relative;
                    }
                }
            }
            @at-root #{&}-fullScreen{
                .nu_content-wrap{
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    height: 100%;
                    width: 100%;
                }
            }
            @at-root #{&}-centerMiddle{
                .nu_content-wrap{
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-52%);
                    // width: 70%;
                    // min-width: 270px;
                    max-height: 90%;
                }
            }
        }
    }
}

//弹出层
@mixin nuPopup () {
    .nus_popup{
        pointer-events: none;
        display: block;
        position: fixed;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 9999;
        max-width: 100%;
        margin: 0 auto;
        > * {
            pointer-events: auto;
        }
        .nu_popup-bg{
            display: block;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0);
        }
        .nu_mask{
            background: $nupopup-mask-color;
        }
        .nu_content-wrap{
            position: absolute;
            // width: 100%;
            font-size: 0;
            max-width: 100%;
            max-height: 100%;
            margin: 0 auto;
        }
        .nu_content{
            display: block;
            width: 100%;
            height: 100%;
            // background: $bgFff;
            padding: 0;
            font-size: $fontSizeDefault;
        }
    }
    @include popupAlign();
}

// 动画时间
@mixin nuPopupAnimation ($time: $nupopup-animation-time) {
    .nus_popup{
        .nu_close{ // 关闭按钮
            position: absolute;
            font-size: $nupopup-close-font-size;
            line-height: $nupopup-close-size;
            width: $nupopup-close-size;
            height: $nupopup-close-size;
            right: $nupopup-close-right;
            top: $nupopup-close-top;
            border-radius: 50%;
            text-indent: -2px;
            background: $nupopup-close-bg-color;
            z-index: 10;
            text-align: center;
            @include iconPadding();
        }
        .nu_content{
            display: inline-block;
            width: 100%;
        }
    }

    .n_popup-enter-active,.n_popup-leave-active {
        transition: opacity $time ease-out;
        opacity: 0;
        .n_toUp{//从下往上的动画
            transition: transform $time ease-out;
            transform: translateY(100%);
        }
        .n_toBottom{//从上往下的动画
            transition: transform $time ease-out;
            transform: translateY(-100%);
        }
        .n_toLeft{//从右往左的动画
            transition: transform $time ease-out;
            transform: translateX(100%);
        }
        .n_scale {//从小到大的动画
            transition: transform $time ease-out;
            transform: translateY(-10%) scale(0);
        }
    }
    .n_popup-enter-to{//进入结束
        opacity: 1;
        .n_toUp,.n_toBottom{//从下往上的动画
            transform: translateY(0);
        }
        .n_toLeft{//左右的动画
            transform: translateX(0);
        }
        .n_scale {//从小到大的动画
            transform: translateY(0) scale(1);
        }
    }

    .n_popup-leave-active{//开始退出
        opacity: 1;
    }

    .n_popup-leave-to{//退出结束
        opacity: 0;
        .n_toUp{//从下往上的动画
            transform: translateY(100%);
        }
        .n_toBottom{//从上往下的动画
            transform: translateY(-100%);
        }
        .n_toLeft{//从右往左的动画
            transform: translateX(100%);
        }
        .n_scale {//从小到大的动画
            transform: translateY(-10%) scale(0);
        }
    }
}