@import url('../index.less');
.imitate-modal-root {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    .imitate-modal-mask {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .imitate-modal-outer {
        transform-origin: 0% center ;
        width: 520px;
        background-color: white;
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        &[centered] {
            top: 50%;
            transform: translate(-50%, -50%);
            transform-origin: 0% 0%;
        }
        .imitate-modal-title {
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
            .shallowBorderBottom();
            color: rgb(31, 15, 15);
            font-size: 16px;
            font-weight: 600;
        }
        .imitate-modal-cancel {
        //    z-index: 10;
            position: absolute;
            right: 0;
            top: 0;
            width: 56px;
            height: 52px;
            font-size: 20px;
            cursor: pointer;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            a {
                font-size: 16px;
            }
        }
        .imitate-modal-content {
            padding: 25px;
        }
        .imitate-modal-footer {
            padding: 10px 15px;
            .shallowBorderTop();
            text-align: right;
            .imitate-btn+.imitate-btn {
                margin-left: 8px;
            }
        }
    }
}

.imitate-moda-animationDuration {
    animation-duration: 0.3s;
}
.imitate-modal-maskIn {
    animation-name: maskAnimateIn;
}
.imitate-modal-maskOut {
    animation-name: maskAnimateOut;
}
@keyframes maskAnimateIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes maskAnimateOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.imitate-modal-In {
    animation-name: modalAnimateIn;
    &[centered] {
        animation-name: modalCenterAnimateIn;
    }
}
.imitate-modal-Out {
    animation-name: modalAnimateOut;
    &[centered] {
        animation-name: modalCenterAnimateOut;
    }
}
@keyframes modalAnimateIn {
    from {
        opacity: 0;
        transform: scale(0.3) translateX(-50%) ;
    }
    to {
        opacity: 1;
        transform: scale(1) translateX(-50%) ;
    }
}
@keyframes modalAnimateOut {
    form {
        opacity: 1;
        transform: scale(1) translateX(-50%) ;
    }
    to {
        opacity: 0;
        transform: scale(0.3) translateX(-50%) ;
    }
}

@keyframes modalCenterAnimateIn {
    from {
        opacity: 0;
        transform: scale(0.3) translate(-50%, -50%) ;
    }
    to {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) ;
    }
}
@keyframes modalCenterAnimateOut {
    form {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%) ;
    }
    to {
        opacity: 0;
        transform: scale(0.3) translate(-50%, -50%) ;
    }
}