/*
    Styling for a modal overlay, which covers the rest of the page when a modal dialog is displayed.
*/
.modal-overlay
{
    /*
        The modal overlay fills the entire visible viewport below the header.
        Fixing the position is required to prevent page contents from interfering with this.
    */
    width: 100VW;
    height: calc(100VH - var(--WEBPAGE-HEADER-HEIGHT));
    position: fixed;
    top: var(--WEBPAGE-HEADER-HEIGHT);
    left: 0;
    /*
        The background color is a semi-transparent dark color so that the page is slightly obscured.
        The background is made translucent instead of applying an opacity filter since this
        may contain modal dialogs, which should be fully opaque.
    */
    background-color: rgba(0, 0, 0, 0.5);
    /*
        The modal overlay is hidden by default.
        Controlling the modal overlay's visibility via opacity allows for a smooth transition,
        which would not be possible with the display property.
    */
    opacity: 0%;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* The modal overlay is positioned in front of the page contents. */
    z-index: var(--modal-overlay-z-index);
    /* Any content within the overlay should be centered. */
    align-items: center;
    justify-content: center;
    /* Any modal dialogs displayed within the overlay should be centered. */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Styling when the modal overlay is visible. */
    &.visible
    {
        /* The modal overlay should be fully opaque when visible. */
        opacity: 100%;
        pointer-events: all;
    }
}

/*
    Styling for modal dialogs. This CSS class name includes the "-2" suffix to avoid conflicts with
    the existing modal dialog CSS class, which was created before we were using React components.
*/
dialog.modal-dialog-2
{
    /* The default styling for HTML dialog elements should be removed. */
    border: none;
    padding: 0;
    color: var(--neutral-surface-high-emphasis-contrast-color);
    /* Modal dialogs should use a background to contrast against the modal overlay. */
    background: var(--neutral-low-emphasis-surface-color);
    /* Modal dialogs should have a rounded border. Hiding overflow is necessary to ensure that the header's sharp corners do not poke out. */
    border-radius: 0.5rem;
    overflow: hidden;
    /* Modal dialogs should be sized based on their content within bounds that ensure they look nice. */
    min-width: 200px;
    width: fit-content;
    max-width: 80VW;
    height: fit-content;
    max-height: 80VH;
    /* A modal dialog should have a box shadow so it appears to hover over the page. */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    /*
        Modal dialogs should use a header/body layout, with the body occupying space as necessary.
        Note that the default HTML dialog element styling sets the display to none so that the dialog is completely hidden.
        However, this prevents us from showing the dialog using a smooth animation. As a result, the display property is
        explicitly set here.
    */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "body";
    /* All transitions should be smooth and relatively fast. */
    transition: all 0.3s ease;

    /* Styling for open modal dialogs. */
    &[open]
    {
        /* Dialogs should fade in when opened. */
        animation: modal_dialog_fade_in 0.3s ease forwards;
    }

    /* Styling for closed modal dialogs. */
    &:not([open])
    {
        /* The dialog should not interact with the cursor in any capacity when closed. */
        pointer-events: none;
        user-select: none;
        /* The dialog should be hidden when not shown. */
        opacity: 0%;
    }

    /* Styling for the modal dialog's overlay. */
    &::backdrop
    {
        /* The backdrop should obscure the rest of the webpage. */
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(0.75px);
    }

    /* Styling for the modal dialog header. */
    .modal-dialog-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;
        gap: 0.5rem;

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

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

            /* Styling for the close button. */
            .modal-dialog-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 modal dialog body. */
    .modal-dialog-body
    {
        /* The modal dialog 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;
        /* The body should not expand to fit its content. */
        min-height: 0;
    }
}

/*
    An animation to fade in a modal dialog.
    This should make the modal dialog appear to simultaneously fade in and slide up.
*/
@keyframes modal_dialog_fade_in
{
    from
    {
        opacity: 0%;
        transform: translateY(15%);
    }
    to
    {
        opacity: 100%;
        transform: translateY(0%);
    }
}