.lightbox-wrapper {

    .lightbox {
        position: fixed;
        display: block;
        z-index: 5001;
        @include media(">=tablet") {
            width: min(750px, 60%);
        }
        @include media("<tablet") {
            width: 80%;
        }        
        height: fit-content(60%);
        min-height: 200px;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 25px;
        background:rgba(255, 255, 255, 0.95);
    }

    .lightbox-open {
        top: 45%;
        overflow: auto;
        visibility: visible;
        opacity: 1;
        transition: transform 0.5s, opacity 0.6s, top 0.5s;
    }
    
    .lightbox-closed {
        visibility: hidden;
        top: -80%;
        opacity: 0;

        transition: all 1s;
    }

    .lightbox-backdrop {
        position: fixed;
        display: block;
        z-index: 5000;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);

        opacity: 1;
        transition: opacity 1s;
    }

    .backdrop-closed {
        display: none;
        opacity: 0;
    }
    
    .lightbox-header {
        min-height: 20vh;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        .header-text {
            display: flex;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            background: linear-gradient(to bottom, rgba(224, 224, 224, 0.75), rgba(255, 255, 255, 0));
            padding-bottom: 2rem;
            
    
            div {

                h2 {
                    padding-left: 1rem;
                }

                button {
                    margin-right: 10px;
    
                    width: 40px;
                    height: 40px;
                    font-size: 2rem;
                    background-color: rgba(0, 0, 0, 0);
                    color: black;
                    border: 0px;
                    transition: all 0.2s ease-in-out;
                    text-decoration: none;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        transform: scale(1.1);
                        background-color: rgba(0, 0, 0, 0.05);
                    }
                }
            }
        }
    }
    
    // sets max height and adds scroll bar
    .lightbox-content {
        max-height: 55vh;
        overflow: auto;
    }
}


// This is for the components that are loaded dynamically. provide some default styles
.lightbox-content-wrapper {
    padding: 0 1.5rem 1.5rem 1rem;
    width: 85%;
    margin-left: 7.5%;

    p {
        display: block;
        word-break: keep-all;
    }

// <<<<<<< HEAD
    img {
        padding-top: 1rem;
        width: 100%;
    }
// =======
    .lightbox-skills-container {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .skills-grid {
        width: 75%;
        margin-top: 0.5rem;

        > .skill {
            padding-top: 1.5rem;
        }
// >>>>>>> a9f3ab759c675d95a9ad23a63aa8570a5fab8f0a
    }
}

