$defaultDuration: 300ms;

@import './push.scss';


.mx-webview{
    &.active,
    &.inactive{
        display: block;
        visibility: visible;
    }
}

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

.page-slide-in{
    &-forward{
        z-index: 2 !important;
        animation: slide-in $defaultDuration ease-out forwards;
        &::before{
            animation:shadow-fadein $defaultDuration ease-out;
        }
    }
    &-backward{
        animation: slide-out-back $defaultDuration ease-in backwards ;
    }
}
.page-slide-out{
    &-forward{
        animation: slide-out $defaultDuration ease-in backwards;
    }
    &-backward{
        z-index: 2 !important;
        animation: slide-in-back $defaultDuration ease-in backwards;
        &::before{
            animation:shadow-fadeout $defaultDuration ease-in;
        }
    }
}

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

@keyframes slide-in{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(0)
    }
}
@keyframes slide-in-back{
    0%{
        transform: translateX(0)
    }
    100%{
        transform: translateX(100%)
    }
}

// @keyframes slide-out{
//     0%{
//         transform: translateX(0)
//     }
//     100%{
//         transform: translateX(-30%);
//     }
// }
// @keyframes slide-out-back{
//     0%{
//         transform: translateX(-30%)
//     }
//     100%{
//         transform: translateX(0);
//     }
// }


