@layer components {
    .lightbox {
        --lightbox-duration: 300ms;
        --lightbox-padding: 3vmin;

        background-color: transparent;
        block-size: 100dvh;
        border: 0;
        inline-size: 100dvw;
        inset: 0;
        margin: auto;
        max-height: unset;
        max-width: unset;
        overflow: hidden;
        /* To make this work, the application.html.erb layout must include viewport-fit=cover */
        padding:
            calc(var(--lightbox-padding) + env(safe-area-inset-top, 0px)) calc(var(--lightbox-padding) + env(safe-area-inset-right, 0px)) calc(var(--lightbox-padding) + env(safe-area-inset-bottom, 0px)) calc(var(--lightbox-padding) + env(safe-area-inset-left, 0px));
        text-align: center;

        &::backdrop {
            -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
            /* Uses standard rgb fallback or color-mix based on your variables */
            background-color: rgb(0 0 0 / 0.5);
        }

        /* Closed state */
        &,
        &::backdrop {
            opacity: 0;
            transition: var(--lightbox-duration) allow-discrete;
            transition-property: display, opacity, overlay;
        }

        /* Open state */
        &[open],
        &[open]::backdrop {
            align-items: center;
            display: flex;
            justify-content: center;
            opacity: 1;

            @starting-style {
                opacity: 0;
            }
        }
    }

    .lightbox__actions {
        display: flex;
        gap: var(--space-2);
        /* Aligns the close/action buttons to the top right, respecting safe areas */
        inset:
            calc(var(--lightbox-padding) + env(safe-area-inset-top, 0px)) calc(var(--lightbox-padding) + env(safe-area-inset-right, 0px)) auto auto;
        position: absolute;
        z-index: var(--z-10);
        /* Ensures buttons sit above the image */
    }

    .lightbox__figure {
        display: flex;
        flex-direction: column;
        gap: var(--lightbox-padding);
        margin: 0 auto;
        max-block-size: 100%;
        /* Optional: subtle scale up animation mirroring Fizzy's concept */
        transform: scale(0.95);
        transition: transform var(--lightbox-duration) cubic-bezier(0.16, 1, 0.3, 1);

        img {
            object-fit: contain;
        }
    }

    /* Triggers the scale animation when the dialog opens */
    .lightbox[open] .lightbox__figure {
        transform: scale(1);

        @starting-style {
            transform: scale(0.95);
        }
    }

    .lightbox__caption {
        color: var(--white);
        font-size: var(--text-normal);

        &:empty {
            display: none;
        }

        &[tabindex="-1"]:focus-visible {
            outline: unset;
        }
    }

    .lightbox__image {
        flex: 1;
        min-block-size: 0;
        /* Prevents flexbox auto-sizing from blowing out of bounds */
    }

    /* Prevent body from scrolling when lightbox is open */
    html:has(.lightbox[open]) {
        overflow: clip;
    }
}