/* Popup — modèle canonique ; son emploi : canon_popup.md. */

@layer components {
    .popup {
        width: var(--popup-width, 400px);
        max-width: calc(100% - 2 * var(--canon-space-edge));
        max-height: 80vh;
        overflow-y: auto;
        margin: auto;
        padding: var(--popup-padding, var(--canon-space-6));
    }
    .popup::backdrop {
        inset-block-start: var(--popup-scrim-top, 0px);
    }
    .popup-close {
        position: absolute;
        inset-block-start: var(--canon-space-3);
        inset-inline-end: var(--canon-space-3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--canon-size-icon-target);
        height: var(--canon-size-icon-target);
    }
    .popup-title {
        margin-block-end: var(--canon-space-2);
        padding-inline-end: var(--canon-space-10);
    }
    .popup-text,
    .popup-content {
        margin-block-end: var(--canon-space-5);
    }
    .popup-actions {
        display: flex;
        flex-direction: var(--popup-actions-orientation, row);
        flex-wrap: wrap;
        justify-content: var(--popup-actions-align, flex-end);
        gap: var(--canon-space-2);
    }

    .popup {
        border: var(--canon-line-width) solid var(--popup-line, var(--canon-theme-line));
        border-radius: var(--popup-radius, var(--canon-radius-card));
        background-color: var(--popup-surface, var(--canon-theme-raised));
        box-shadow: var(--popup-shadow, var(--canon-shadow-overlay, none));
        backdrop-filter: var(--popup-backdrop, none);
    }
    .popup::backdrop {
        background-color: var(--popup-scrim, var(--canon-theme-scrim));
        backdrop-filter: var(--popup-scrim-filter, none);
    }
    .popup-close {
        border: 0;
        border-radius: var(--canon-radius-control);
        background-color: transparent;
    }
    .popup-close:hover {
        background-color: var(--canon-theme-highlight);
    }

    .popup {
        text-align: var(--popup-align, inherit);
        color: var(--canon-theme-ink);
    }
    .popup-text {
        font-size: var(--canon-size-control);
        line-height: var(--canon-leading-reading);
        color: var(--canon-theme-muted);
    }
    .popup-close {
        color: var(--canon-theme-faint);
    }
    .popup-close:hover {
        color: var(--canon-theme-ink);
    }

    .popup[open] {
        animation: popup-reveal var(--canon-duration-reveal);
    }
    .popup[open]::backdrop {
        animation: popup-backdrop-reveal var(--canon-duration-reveal);
    }
    .popup-close {
        cursor: pointer;
        transition: background-color var(--canon-duration-state), color var(--canon-duration-state);
    }
    @keyframes popup-reveal {
        from {
            opacity: 0;
            transform: translateY(12px) scale(0.97);
        }
    }
    @keyframes popup-backdrop-reveal {
        from {
            opacity: 0;
        }
    }
}

@layer components {
    .popup--wide {
        width: 600px;
    }
}