/*-- ---------------------------------- -->
<---          Lightbox Gallery          -->
<--- ---------------------------------- -*/

/*---- Buttons ----*/

.lightbox-btn {
    width: 2.2em;
    height: 2.2em;
    position: absolute;
    border-radius: 50%;
    transition: all 0.3s;
    background-color: #6BBF59;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.lightbox-btn:hover {
    filter: brightness(1.1);
}

.lightbox-btn:disabled {
    cursor: initial;
    background-color: #6BBF59;
    opacity: 0.5;
}

.lightbox-btn-close {
    top: -2em;
    right: -1.7em;
    background-size: 100%;
    background-image: url('assets/svgs/icon-lightbox-close.svg');
}

.lightbox-btn-next,
.lightbox-btn-previous {
    top: calc(50% - (2.2em / 2));
    background-size: 100%;
    background-image: url('assets/svgs/icon-lightbox-arrow.svg');
}

.lightbox-btn-previous {
    left: -1.5em;
    transform: rotate(180deg);
}

.lightbox-btn-next {
    right: -1.5em;
}

/*---- Animations ----*/

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes createBox {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes deleteBox {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
    }
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    .lightbox-gallery {
        padding: 3rem 1rem 4rem 1rem;
        background-color: #f8f8f8;
    }

    .lightbox-gallery .cs-title {
        max-width: 80rem;
        text-align: center;
        margin: 0 auto 2.5rem auto;
    }

    .lightbox-content {
        text-align: center;
    }

    .lightbox-content img {
        max-width: 100%;
        height: auto;
    }

    .gallery-item {
        width: 100%;
        background-color: transparent;
        padding: 0;
    }

    .gallery-item img {
        max-width: 100%;
        width: 100%;
        border-radius: 10px;
        transition: transform 0.25s ease, filter 0.25s ease;
    }

    .gallery-item img:hover {
        transform: scale(1.03);
        filter: drop-shadow(0px 8px 12px #00000020);
    }

    .remove-scroll {
        overflow: hidden;
    }

    .lightbox-hide {
        top: -9999px;
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }

    .gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        gap: 1rem;
    }

    .lightbox-container {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2em;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        position: fixed;
        align-items: center;
        justify-content: center;
        background-color: rgb(29, 29, 29);
        background-color: rgba(29, 29, 29, 0.8);
        z-index: 99999;
    }

    .lightbox-wrapper {
        position: relative;
    }

    .lightbox-image {
        max-height: 100vh;
        vertical-align: middle;
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    .gallery {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
    }

    .lightbox-btn-previous {
        left: 0.5em;
    }

    .lightbox-btn-next {
        right: 0.5em;
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    .gallery {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        max-width: 80rem;
        margin: auto;
        gap: 2rem;
    }

    .lightbox-wrapper {
        max-width: 75%;
    }
}

/* Desktop - 1280px */
@media only screen and (min-width: 80rem) {
    .lightbox-wrapper {
        max-width: 50%;
    }
}