/* Styling for popup windows. */
.popup-window
{
    /*
        Popup windows should be initially hidden.
        Showing/hiding the popup window using a combination of max height and opacity
        allows the popup to concurrently fade in and expand when appearing and fade out
        and collapse when disappearing.
    */
    opacity: 0;
    max-height: 0;
    /* A popup window's visibility transition should be smooth and fast. */
    transition: opacity 0.3s ease, max-height 0.3s ease;
    /* A popup window should float relative to the viewport. */
    position: fixed;
    /* The popup window should be sized according to its contents up to a reasonable maximum. */
    width: fit-content;
    max-width: 60VW;
    height: fit-content;
    overflow: hidden;
    /* A popup window should reflect the website's theme. */
    background: var(--neutral-high-emphasis-surface-color);
    border-radius: 0.5rem;
    /* A popup window should have a box shadow so it appears to hover over the page. */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    /* A popup window should float above most of the elements on the page except the modal overlay. */
    z-index: var(--popup-z-index);
    /* Popup windows should share their vertical space among the header and body. */
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "body";

    /*
        Styling for when a popup window is visible/hidden.

        Showing/hiding the popup window using a combination of max height and opacity
        allows the popup to concurrently fade in and expand when appearing and fade out
        and collapse when disappearing. This is done instead of using the display or visibility
        properties since they do not allow for transitions.
    */
    &.visible
    {
        /* Visible popup windows should show up. */
        max-height: 60VH;
        opacity: 1;
        /* When visible, a popup window should allow all pointer events. */
        pointer-events: all;
    }
    &.hidden
    {
        /* When hidden, a popup window should not interact with pointer events. */
        pointer-events: none;
        /* Hidden popup windows should not be visible. */
        max-height: 0;
        opacity: 0%;
    }

    /* Styling for the popup window header. */
    .popup-window-header
    {
        /* The header should stick out by being darker than the body. */
        background: var(--neutral-lowest-emphasis-surface-color);
        /* Padding is used for aesthetics. */
        padding: 0.25rem 0.5rem;
        /* The header should be visible even when scrolling. */
        position: sticky;
        top: 0;
        left: 0;
        /* The header should be above the body at all times. */
        z-index: var(--above-popup-z-index);
        /* The header's content (the title and close button) should be horizontally inline with space between. */
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* Hovering over the header should indicate that the window can be moved. */
        cursor: move;

        /* Styling for popup window titles. */
        .popup-window-title
        {
            /* The title should be easy to read and prominently displayed. */
            font-size: 1.25rem;
        }

        /* Styling for the close button inside the popup window. */
        .popup-window-close-button-container
        {
            /* The close button's icon should be centered. */
            display: flex;
            align-items: center;
            justify-content: center;

            /* Styling for the close button. */
            .popup-window-close-button
            {
                /* The close button should be easy to see. */
                font-size: 1.5rem;
                /*
                    Having a functionally transparent background color makes the hover-and-click effect for the button more obvious.
                    This is the case since the effects use a brightness filter, which would be too subtle without a base background color.
                */
                background: var(--neutral-lowest-emphasis-surface-color);
                /* The close button should be rounded to cohere with the site's theme. */
                border-radius: 0.25rem;

                /* Hover styling for the close button. */
                &:hover
                {
                    /* The close button should be easy to see when hovered over. */
                    background: var(--neutral-low-emphasis-surface-color);
                }
            }
        }
    }

    /* Styling for the popup window body. */
    .popup-window-body
    {
        /* The popup window body should occupy all available space. */
        width: 100%;
        height: 100%;
        /* The body should show a scrollbar for overflowing content. */
        overflow: auto;
        /* Additional right-side padding is used to account for the width of the scrollbar. */
        padding: 0.25rem;
        padding-right: 16px;
    }
}