
.@{prefix}-modal-container {
    width: 100%;
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 8000;
    background-color: rgba(0,0,0,0);
    transition: background-color 0.4s ease-in-out;
        
    .@{prefix}-modal-content {
        position: relative;
        top: -100%;
        transition: top 0.2s ease-in-out;        
    }
}

.@{prefix}-modal-container.visible {
    background-color: rgba(0,0,0,0.7);
    pointer-events: auto;
    
    
    .@{prefix}-modal-content {
        position: relative;
        top: 10%;
        left: 10%;
        bottom: 10%;
        right: 10%;
        background-color: #FFFFFF;
        height: 80%;
        width: 80%;
        transition: top 0.3s ease-in-out;
    }
}