/* The public styles of the Vsi.Cms package: the pop-ups (VsiPopups.razor + js/vsi-popups.js).
   A site loads this file on its public pages with
       <link rel="stylesheet" href="_content/Vsi.Cms/css/vsi-public.css" />
   Nothing in here belongs to one site: the window is white, the overlay colour and the width come
   from the data attributes of each pop-up (set by js/vsi-popups.js as --vsi-popup-max-width and
   --vsi-popup-overlay), and a site that wants another look overrides the custom properties below.

   The container (.vsi-popup) has no position, z-index or opacity on purpose: either would make it one
   layer of its own and put overlay and window together under or above a sticky site header. Now the
   overlay and the window each take their own z-index, so a site can lift its header between the two.
   The window takes at most 70% of the screen height and only its body scrolls, so the close button is
   always in sight. The class names are the ones js/vsi-popups.js uses; PopupsAdminConventionTests
   keeps them equal. */

.vsi-popup {
    --vsi-popup-max-width: 640px;
    --vsi-popup-overlay: rgba(0, 0, 0, 0.8);
    --vsi-popup-gap: 17px;
    --vsi-popup-background: #ffffff;
    --vsi-popup-close-color: #222222;
    --vsi-popup-close-background: rgba(255, 255, 255, 0.9);
    --vsi-popup-overlay-z: 9999;
    --vsi-popup-window-z: 10000;
}

.vsi-popup[hidden] {
    display: none;
}

.vsi-popup__window,
.vsi-popup__overlay {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.vsi-popup.vsi-popup--open .vsi-popup__window,
.vsi-popup.vsi-popup--open .vsi-popup__overlay {
    opacity: 1;
}

.vsi-popup__overlay {
    position: fixed;
    inset: 0;
    z-index: var(--vsi-popup-overlay-z);
    background-color: var(--vsi-popup-overlay);
}

.vsi-popup__window {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: var(--vsi-popup-window-z);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: min(var(--vsi-popup-max-width), calc(100vw - 2 * var(--vsi-popup-gap)));
    max-height: 70vh;
    overflow: hidden;
    background-color: var(--vsi-popup-background);
}

/* Only the body scrolls (a long text); the close button above it stays where it is. */
.vsi-popup__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.vsi-popup__link {
    display: block;
    line-height: 0;
}

/* The whole picture stays visible: it scales down to the width of the window and to the height of
   the screen, and keeps its proportions. A real <img>, never a CSS background. */
.vsi-popup__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    margin: 0 auto;
}

.vsi-popup__text {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 24px;
}

.vsi-popup__text > :last-child {
    margin-bottom: 0;
}

/* The close button: a cross in a light round button in the top right corner, above the picture.
   The selectors carry .vsi-popup in front, so a theme that styles every button (a coloured border,
   a background on :hover) at the weight of one class does not win. 44 pixels for a finger. */
.vsi-popup .vsi-popup__close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--vsi-popup-close-background);
    color: var(--vsi-popup-close-color);
    line-height: 1;
    cursor: pointer;
}

.vsi-popup .vsi-popup__close:focus,
.vsi-popup .vsi-popup__close:hover {
    background: var(--vsi-popup-close-background);
    color: var(--vsi-popup-close-color);
}

.vsi-popup .vsi-popup__close:focus-visible {
    outline: 2px solid var(--vsi-popup-close-color);
    outline-offset: 2px;
}

.vsi-popup__close-icon {
    display: block;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
}

/* The page behind does not scroll while a pop-up is open. */
html.vsi-popup-lock,
html.vsi-popup-lock body {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .vsi-popup__window,
    .vsi-popup__overlay {
        transition: none;
    }
}