cirrus-ui/src/components/modal.scss

@use '../internal' as *;

$generate-utility: should-generate-classes($MODAL);

@if $generate-utility {
    /* The base of the modal dialog, which is an overlay of the webpage */
    .modal {
        position: fixed; /* Scrolls with the user */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0; /* Initially hidden */
        padding: 1rem;
        display: none; /* Doesn't block the elements underneath */
        align-items: center;
        justify-content: center; /* Vertical centering */
        pointer-events: none; /* Prevent any pointer events made to modal while hidden */

        /* When the modal dialog is visible */
        &:target,
        &.modal--visible {
            display: flex;
            opacity: 1;
            z-index: 999;
            pointer-events: auto; /* Re-enable pointer events */

            /* The div in the modal dialpog used to create the translucent background */
            .modal-overlay {
                position: absolute; /* Absolute inside of the modal container */
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                display: block;
                background-color: transparentize($color: $cirrus-dark, $amount: 0.5);
            }

            .modal-container,
            .modal-container {
                animation: slide-down var(--animation-duration) ease 1;
                z-index: 1;
            }

            // Animation modifiers
            &.modal-animated--zoom-in,
            &.modal-animated--zoom-out {
                opacity: 1;
                transition: 300ms all ease;
            }

            &.modal-animated--zoom-in .modal-content,
            &.modal-animated--zoom-out .modal-content {
                transform: scale(1);
                transition: 300ms all ease;
            }
        }

        /* Different size modals */
        &.modal-small .modal-content {
            max-width: 20rem; /* 320px */
        }

        &.modal-large .modal-content {
            max-width: 60rem; /* 960px */
        }

        /* The modal dialog body with the text itself */
        .modal-content {
            background-color: var(--cirrus-bg);
            padding: 0;
            display: block;
            border-radius: 3px;
            box-shadow: 0 0.4rem 1rem transparentize($color: $cirrus-dark, $amount: 0.7);
            z-index: 1;
            color: var(--cirrus-fg);
            max-width: 40rem; /* 640px */

            /* Restrict width  */
            &.small {
                max-width: 32rem;
            }

            #{$header-selectors} {
                color: var(--cirrus-fg);
            }

            .modal-header {
                padding: 1rem 2.5rem;
            }

            .modal-header .modal-title {
                font-weight: bolder;
                font-size: 1.4rem;
            }

            .modal-body {
                padding: 1rem 2.5rem;
                overflow-y: auto;
                max-height: 50vh; /* Max height is 50% of viewport height which prevents dialog from extetnding past screen */
                position: relative;
            }

            .modal-footer {
                padding: 1rem 2.5rem;
            }

            @include screen-below($sm) {
                max-width: 90%;
            }
        }

        /* MODAL ANIMATIONS */
        &.modal-animated--dropdown {
            animation: slide-down var(--animation-duration) ease 1;
        }

        /* Visible state */
        &.modal-animated--zoom-in,
        &.modal-animated--zoom-out {
            display: flex;
            opacity: 0;
            transition: 300ms all ease;
        }

        &.modal-animated--zoom-in .modal-content {
            transform: scale(0.8);
            transition: 300ms all ease;
        }

        &.modal-animated--zoom-out .modal-content {
            transform: scale(1.2);
            transition: 300ms all ease;
        }
    }

    /* Keyframes for slide down animation */
    @keyframes slide-down {
        0% {
            opacity: 0;
            transform: translateY(-3rem);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @include screen-below($sm) {
        .modal-content {
            max-width: 90%;
        }
    }
}