@layer components {
    .lightbox {
        --dialog-duration: 350ms;
        
        background-color: transparent;
        block-size: 100dvh;
        border: 0;
        inline-size: 100dvw;
        inset: 0;
        margin: auto;
        max-height: unset;
        max-width: unset;
        overflow: hidden;
        text-align: center;

        &::backdrop {
            -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
            background-color: black;
        }

        /* Closed state */
        &,
        &::backdrop {
            opacity: 0;
            transition: var(--dialog-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;
            }
        }
    }

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

    body:has(.lightbox[open]) {
        overflow: clip;
    }
}