meta-lightbox/src/scss/window.scss

@import "variables";
$module-name: "meta-MetaWindow";

@keyframes fade {
    0% {
        opacity: 1;

        filter: grayscale(0);
    }

    50% {
        opacity: .5;

        filter: grayscale(1);
    }

    100% {
        opacity: 1;

        filter: grayscale(0);
    }
}

.#{$module-name} {
    position: fixed;

    // lightbox inner elements
    .meta-spinner--embed,
    .meta-spinner,
    .meta-error {
        z-index: 2;
        display: none;
        text-align: center;

        align-items: center;
        justify-content: center;
    }

    .meta-spinner--embed,
    .meta-spinner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        @include spinner_style();
    }

    .meta-error {
        font-size: 1.5em;
        font-weight: bold;
        color: $clr-red;
    }

    .meta-spinner--embed {
        display: flex;
    }

    &-overlay {
        position: fixed;
        z-index: 98;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: none;
        background: $meta-overlay-bg;

        align-items: center;
        justify-content: center;

        // meta states
        &--open {
            display: flex;
        }

        &--loading {
            animation-name: fade;
            animation-duration: 5s;
            animation-iteration-count: infinite;

            .meta-spinner {
                display: flex;
            }
        }

        &--error {
            .meta-content {
                justify-content: center;
            }

            .meta-error {
                display: flex;
            }
        }
    }

    // navs
    .meta-nav {
        font-size: $meta-nav-size;
        z-index: 2;
        color: $meta-nav-color;
        border: 0;
        background: none;
        text-shadow: $meta-nav-hover-shadow 0 0 .25em;

        @include hover-focus() {
            color: $meta-nav-color;
        }

        &:hover {
            text-decoration: none;
            color: $meta-nav-hover-color;
            background: $meta-nav-hover-bg;
            text-shadow: none;
        }
    }

    .meta-nav-arrow {
        font-size: $meta-nav-arrows-size;
        position: absolute;
        z-index: 2;
        top: auto;
        bottom: 0;
        display: flex;
        padding: $meta-nav-padding;

        align-items: center;
        justify-content: center;
        @include hover-focus() {
            .fa,
            .fas,
            .far,
            .fab {
                transform: $meta-nav-hover-transform;
            }
        }

        @media (min-width: map-get($grid-breakpoints, "lg")) {
            top: 0;
            bottom: 0;
        }

        &__next {
            right: 0;
        }

        &__prev {
            left: 0;
        }

        @media (min-width: map-get($grid-breakpoints, "lg")) {
            &__next {
                right: -($meta-nav-arrows-size + .5);
            }

            &__prev {
                left: -($meta-nav-arrows-size + .5);
            }
        }
    }

    .meta-close {
        position: absolute;
        top: -3rem;
        right: 0;
        width: 1.25em;

        &:hover {
            .fa,
            .fas,
            .far,
            .fab {
                transform: $meta-nav-close-hover-transform;
            }
        }

        @media (min-width: map-get($grid-breakpoints, "lg")) {
            top: -($meta-nav-arrows-size + .5);
            right: -($meta-nav-arrows-size + .5);
        }
    }

    .meta-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        width: 100%;

        @media (min-width: map-get($grid-breakpoints, "md")) {
            height: 80%;
        }
        @media (min-width: map-get($grid-breakpoints, "lg")) {
            width: 90%;
            width: calc(90% - 3rem);
            height: 90%;
            height: calc(90% - 3rem);
        }
    }

    .meta-wrap {
        display: flex;
        overflow: auto;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0 auto;
        word-break: break-word;

        img {
            max-width: 100%;
            max-height: 100%;

            object-fit: cover;
        }
    }

    // Lightbox types

    &--text {
        .meta-content {
            padding: $meta-text-wrapper-padding-height $meta-text-wrapper-padding-width;
            padding-right: 0;
            color: $meta-text-wrapper-color;
            background: $meta-text-wrapper-bg;
        }

        .meta-wrap {
            padding-right: $meta-text-wrapper-padding-width;
        }
    }

    &--image,
    &--video {
        .typography,
        .meta-wrap {
            overflow: hidden;
            min-height: 100%;

            align-items: center;
            justify-content: center;

            img {
                margin: 0;
            }
        }
    }

    &--video,
    &--embed {
        @include responsive-ratio($meta-video-width, $meta-video-height, true);

        a[rel="nofollow noreferrer noopener"] {
            font-size: $meta-embed-loading-failed-size;
            font-weight: $meta-embed-loading-failed-weight;
            color: $meta-embed-loading-failed-color;

            &:before {
                display: block;
                content: "Unable to load. Please follow the provided link: ";
            }
        }

        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
}