// MODAL
// ––––––––––––––––––––––––––––––––––––––––––––––––––


.modal {
    transition: all 0.500s !important;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    max-height: 100vh;
    padding: 80px 15px;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -10;
    overflow-x: hidden;


    opacity: 0;
    overflow-y: auto !important;


    .modal-container {
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        z-index: 1350;
        box-shadow: 0 0 15px rgba(0, 0, 0, .15), 0 0 5px 1px rgba(0, 0, 0, .1);

        @if $radius {
            border-radius: $border-radius;
        }
    }

}



.modal-title {
    margin: 0;
    font-size: 20px;
}


.modal-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: $white;
    border-bottom: 1px solid #e9ecef;
    ;
    padding: 10px 15px;

    .modal-close {
        padding: 10px;
        cursor: pointer;

        &:hover {
            opacity: 0.5;
        }
    }
}


.modal-container {
    display: none;
    max-width: 580px;
    width: 100%;
    height: auto;
    background: white;
    transition: $transition;

    &.modal-sm {
        max-width: 480px;
    }

    &.modal-md {
        max-width: 750px;
    }

    &.modal-lg {
        max-width: 1100px;
    }

    .modal-body {
        padding: 15px;
    }

    .modal-footer {
        padding: 10px 15px;
        background: $white;
        border-top: 1px solid #e9ecef;
    }

}

.modal.modal-show {
    opacity: 1 !important;
    z-index: 1250 !important;
    animation: modalbg 1s ease-in forwards;
    pointer-events: initial !important;

    .modal-container {
        display: block !important;

        &.animation-added {
            animation: animateUp 0.5s forwards;
        }
    }

}


.modal-exit {
    top: 0 !important;
    opacity: 0;
    z-index: -1;
}

// MODAL BACKGROUND
@keyframes modalbg {
    0% {
        background: rgba(black, 0);
    }

    100% {
        background: rgba(black, 0.5);

    }
}

// MODAL CONTAINER ANIMATION ON SHOWING
@keyframes animateUp {
    0% {
        transform: translateY(-50px)
    }

    100% {
        transform: translateY(0px)
    }
}