.page-push-in{
    &-forward{
        &.mx-webview{
            overflow-x: unset;
            overflow: unset;
            overflow-y: unset;
            &:before{
                content:"";
                display: block;
                position:absolute;
                width:100%;
                height: 30px;
                left:0;
                top: -30px;
                background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,0.2));
            }
        }
    }
}

.page-push-in{
    &-forward{
        z-index: 2;
        animation:push-in-forward $defaultDuration ease;
        &::before{
            display: block;
            animation:shadow-fadein $defaultDuration ease-out;
        }
    }
    &-backward{
        &::before{
            display: none;
        }
    }
}

.page-push-out{
    &-forward{
        &::before{
            display: none;
        }
    }
    &-backward{
        z-index: 2;
        animation: push-out-backward $defaultDuration ease;
        &::before{
            display: none;
            animation:shadow-fadeout $defaultDuration ease-in;
        } 
    }
}


@keyframes push-in-forward{
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(0);
    }
}

@keyframes push-out-backward{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(100%);
    }
}

@keyframes shadow-fadein{
    0%{
        opacity: 0;
    }
    100%{
        opacity: .3;
    }
}
@keyframes shadow-fadeout{
    0%{
        opacity: .3;
    }
    100%{
        opacity: 0;
    }
}