:root {
    --lightbox-background: oklch(100% 0 0 / 95%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --lightbox-background: oklch(19% 0 0 / 95%);
    }
}

html[data-theme="dark"] {
    --lightbox-background: oklch(19% 0 0 / 95%);
}

html[data-theme="light"] {
    --lightbox-background: oklch(100% 0 0 / 95%);
}

#lightbox {
    position: fixed;
    inset: 0;

    display: none;

    background: var(--lightbox-background);

    z-index: 9999999;
    cursor: pointer;
    line-height: 0;
}

#lightbox a {
    text-decoration: none;
    border-bottom: 0;
}


/* Image */

#lightbox .img {
    position: fixed;
    inset: 40px;

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

    cursor: default;
}

#lightbox .img img {
    display: block;
    visibility: hidden;

    width: auto;
    height: auto;

    object-fit: contain;

    pointer-events: none;
}


/* Caption */

#lightbox span {
    display: none;

    position: fixed;
    bottom: 13px;
    left: 0;

    width: 100%;

    line-height: 1.4em;
    text-align: center;

    color: var(--primary);

    text-shadow:
        -1px -1px 0 oklch(100% 0 0),
         1px -1px 0 oklch(100% 0 0),
        -1px  1px 0 oklch(100% 0 0),
         1px  1px 0 oklch(100% 0 0);
}


/* Video */

#lightbox .videoWrapperContainer {
    position: fixed;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: min(900px, calc(100vw - 80px));

    cursor: default;
}

#lightbox .videoWrapper {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    background: oklch(0% 0 0);
}

#lightbox .videoWrapper iframe {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* Previous / next */

#lightbox #prev,
#lightbox #next {
    position: fixed;
    top: 50%;

    display: none;

    width: 60px;
    height: 80px;

    transform: translateY(-50%);

    line-height: 72px;
    text-align: center;

    cursor: pointer;

    z-index: 99;

    color: var(--primary);
    font-size: 60px;
}

#lightbox.gallery #prev,
#lightbox.gallery #next {
    display: block;
}

#lightbox #prev {
    left: 0;
}

#lightbox #next {
    right: 0;
}


/* Close */

#lightbox #close {
    position: fixed;
    top: 0;
    right: 0;

    width: 50px;
    height: 50px;

    cursor: pointer;

    z-index: 99;
}

#lightbox #close::before,
#lightbox #close::after {
    position: absolute;

    top: 24px;
    left: 14px;

    width: 23px;
    height: 3px;

    content: "";

    background: var(--primary);

    transform-origin: 50% 50%;
}

#lightbox #close::before {
    transform: rotate(-45deg);
}

#lightbox #close::after {
    transform: rotate(45deg);
}


/* Prevent selection */

#lightbox,
#lightbox * {
    user-select: none;
}


/* Mobile */

/* Mobile */

@media (max-width: 600px) {
    #lightbox .img {
        inset: 16px 16px calc(96px + env(safe-area-inset-bottom));
    }
    
    #lightbox .videoWrapperContainer {
        width: calc(100vw - 32px);
    }

    #lightbox #prev,
    #lightbox #next {
        top: auto;
        bottom: calc(32px + env(safe-area-inset-bottom));

        width: 48px;
        height: 48px;

        transform: none;

        line-height: 44px;
        font-size: 42px;
    }

    #lightbox #prev {
        left: calc(50% - 56px);
    }

    #lightbox #next {
        right: calc(50% - 56px);
    }
}