$modal-duration: 1s;

.modal-container {
    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
}

.modal {
    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    animation-name: modalopen;
    animation-duration: $modal-duration;
}

@keyframes modalopen {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}