/* Vue agrandie — modèle canonique ; son emploi : canon_lightbox.md. */

@layer components {
    :root:has(.lightbox[open]) {
        overflow: hidden;
    }
    .lightbox {
        max-width: 90vw;
        max-height: 90vh;
        margin: auto;
        padding: 0;
        overflow: visible;
    }
    .lightbox-image {
        display: block;
        max-width: 90vw;
        max-height: 90vh;
        object-fit: contain;
    }
    .lightbox-close {
        position: absolute;
        inset-block-end: calc(100% + var(--lightbox-close-space, var(--canon-space-2)));
        inset-inline-end: calc(-1 * var(--lightbox-close-shift, 0px));
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--lightbox-close-size, var(--canon-size-icon-target));
        height: var(--lightbox-close-size, var(--canon-size-icon-target));
    }

    .lightbox {
        border: 0;
        background-color: transparent;
    }
    .lightbox::backdrop {
        background-color: var(--lightbox-scrim, var(--canon-theme-scrim));
        backdrop-filter: blur(var(--lightbox-blur, 0px));
    }
    .lightbox-image {
        border-radius: var(--lightbox-radius, var(--canon-radius-card));
    }
    .lightbox-close {
        border: 0;
        border-radius: var(--canon-radius-pill);
        background-color: var(--lightbox-close-surface, var(--canon-theme-raised));
    }
    .lightbox-close:hover {
        background-color: var(--lightbox-close-hover, var(--canon-theme-highlight));
    }

    .lightbox-close {
        font: inherit;
        font-size: 1.25em;
        line-height: 1;
        color: var(--lightbox-close-ink, var(--canon-theme-ink));
    }
    .lightbox-close:hover {
        color: var(--lightbox-close-hover-ink, var(--lightbox-close-ink, var(--canon-theme-ink)));
    }

    .lightbox[open] {
        animation: lightbox-reveal var(--canon-duration-reveal);
    }
    .lightbox[open]::backdrop {
        animation: lightbox-backdrop-reveal var(--canon-duration-reveal);
    }
    .lightbox-close {
        cursor: pointer;
        transition: background-color var(--canon-duration-state);
    }
    @keyframes lightbox-reveal {
        from {
            opacity: 0;
            transform: scale(0.96);
        }
    }
    @keyframes lightbox-backdrop-reveal {
        from {
            opacity: 0;
        }
    }
}

@layer components {
    .lightbox--structure-document {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        overflow: hidden;
    }
    .lightbox--structure-document[open] {
        display: flex;
        flex-direction: column;
    }
    .lightbox-bar {
        flex: none;
    }
    .lightbox-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: var(--lightbox-body-padding, var(--canon-space-4));
        overflow: auto;
    }
    @media (min-width: 800px) {
        .lightbox--structure-document {
            width: min(100% - 2 * var(--lightbox-document-space, var(--canon-space-8)), var(--lightbox-document-width, 1152px));
            height: calc(100% - 2 * var(--lightbox-document-space, var(--canon-space-8)));
            margin: auto;
        }
    }

    .lightbox--structure-document {
        background-color: var(--lightbox-surface, var(--canon-theme-canvas));
    }
    .lightbox-bar {
        opacity: var(--lightbox-bar-opacity, 0.3);
    }
    .lightbox-bar:hover,
    .lightbox-bar:has(:focus-visible) {
        opacity: 1;
    }
    @media (hover: none) {
        .lightbox-bar {
            opacity: 1;
        }
    }
    @media (min-width: 800px) {
        .lightbox--structure-document {
            border-radius: var(--lightbox-radius, var(--canon-radius-card));
            box-shadow: var(--canon-shadow-overlay, none);
        }
    }

    .lightbox--structure-document {
        color: var(--lightbox-ink, var(--canon-theme-ink));
    }

    .lightbox-bar {
        transition: opacity var(--canon-duration-state);
    }
    .lightbox-body {
        overscroll-behavior: contain;
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer components {
    .plates-lightbox {
        --lightbox-radius: 8px;
        --lightbox-blur: 10px;
        --lightbox-close-size: 36px;
        --lightbox-close-space: 4px;
        --lightbox-close-shift: 40px;
        --lightbox-scrim: rgb(0 0 0 / 0.2);
        --lightbox-close-surface: rgb(255 255 255 / 0.9);
        --lightbox-close-hover: rgb(255 0 0);
        --lightbox-close-ink: var(--raw-color-black-70);
        --lightbox-close-hover-ink: rgb(255 255 255);
    }
    @media (max-width: 600px) {
        .plates-lightbox {
            --lightbox-close-space: -6px;
            --lightbox-close-shift: 0px;
        }
    }
}