.modal {
    position: absolute;
    z-index: 100000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--white-values), 0.7);

    opacity: 0;
    animation: fadeIn 0.1s ease-in-out;
    animation-fill-mode: both;
}

.modal.closing {
    opacity: 1;
    animation: fadeOut 0.2s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 0.1s;
}

.modal-dialog {
    display: flex;
    flex-direction: column;
    max-width: 45rem;
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: var(--shadow-border);
    padding: var(--p3);
    gap: var(--p2);

    opacity: 0;
    animation: fadeIn 0.3s ease-in-out;
    animation-fill-mode: both;
    animation-delay: 0.1s;
}

.modal.closing .modal-dialog {
    opacity: 1;
    animation: fadeOut 0.3s ease-in-out;
    animation-fill-mode: both;
}

.modal-dialog .container {
    display: flex;
    gap: var(--p1);
}

.modal-dialog input, .modal-dialog select, .modal-dialog textarea, .modal-dialog button {
    box-shadow: none;
    padding: var(--p1) var(--p2);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}