html:has(.modal__container[open="true"]) { /* Allow page to scroll if .modal__container is not open */
    overflow-y: hidden;
}

.modal__container {
    align-items: center;
    background-color: color-mix(in srgb, var(--ink), transparent 50%);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 101; /*Navbar index is 100*/
    visibility: hidden;
    opacity: 0;
    transition: 0.4s ease-in-out;

    & > turbo-frame {
        display: inherit;
        justify-content: inherit;
        width: inherit;
    }

    &[open] {
        visibility: visible;
        opacity: 1;
        height: 100vh;
        overflow-y: hidden;
    }

    .modal__page {
        background-color: var(--off-white);
        border-radius: var(--border-radius);
        margin: 0 1rem;
        padding: 0 2rem 2rem;
        max-height: calc(100vh - 2rem);
        max-width: var(--container-m);
        overflow-x: clip;
        overflow-y: scroll;
        position: relative;
        width: 100%;
        word-break: break-word;

        &:has(.ss-main[aria-expanded="true"]) {
            overflow-y: hidden;
        }

        &.modal__large {
            max-width: var(--container-xl);
            max-height: var(--container-xl);
        }

        header.page-header {
            padding-top: 2rem;
            position: sticky;
            top: 0;
            z-index: 90;
        }

        .modal__header {
            background-color: var(--off-white);
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding-top: 2rem;
            position: sticky;
            top: 0;
            z-index: 90;
            margin-bottom: 1.5rem;
        }

        .modal__header::after {
            content: "";
            position: absolute;
            bottom: -2rem;
            left: 0;
            width: 100%;
            height: 2rem;
            background: linear-gradient(to bottom, var(--off-white) 20%, transparent 100%);
            pointer-events: none;
            z-index: 1;
        }

        .modal__close-btn--right {
            margin-left: auto;
        }

        .modal__header-actions {
            align-items: flex-end;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 1rem;
            justify-content: space-between;
            width: 100%;
        }

        & > *:not(.page-header):not(.modal__header):not(.chart__section) {
            margin-left: auto;
            margin-right: auto;
            max-width: var(--container-m);
        }

        &.short {
            min-height: 0;
        }

        .modal__actions {
            margin-top: 1rem;
            width: 100%;
        }

        .modal__busy-notice {
            display: none;
        }

       
        &:has(> turbo-frame[busy]) {
            .modal__busy-notice {
                align-items: center;
                background-color: color-mix(in srgb, var(--pure-white), transparent 50%);
                cursor: wait;
                display: flex;
                flex-direction: column;
                gap: 1rem;
                height: 100%;
                justify-content: center;
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                user-select: none;
                width: 100%;
                z-index: 100;

                .modal__loader {
                    animation: rotation 1s linear infinite;
                    border: 0.25rem solid var(--theme-color-darker);
                    border-bottom-color: transparent;
                    border-radius: 50%;
                    display: inline-block;
                    height: 3rem;
                    width: 3rem;
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        /* var(--screen-md) */
        padding: 1rem;

        .modal__page {
            margin: 0;
            padding: 0 1rem 2rem;
            width: 100%;
        }
    }
}

/* To be removed */
.modal {
    align-items: center;
    background-color: color-mix(in srgb, var(--ink), transparent 50%);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 101; /*Navbar index is 100*/

    & > turbo-frame {
        display: inherit;
        justify-content: inherit;
        width: inherit;
    }

    .modal-wrapper {
        background-color: var(--off-white);
        border-radius: var(--border-radius);
        margin: 0 1rem;
        padding: 0 2rem 2rem;
        max-height: calc(100vh - 2rem);
        max-width: var(--container-m);
        min-height: fit-content;
        overflow-x: clip;
        overflow-y: scroll;
        position: relative;
        width: 100%;
        word-break: break-word;

        header.page-header {
            padding-top: 2rem;
            position: sticky;
            top: 0;
            z-index: 90;
        }

        & > *:not(.page-header) {
            margin-left: auto;
            margin-right: auto;
            max-width: var(--container-m);
        }

        &.short {
            min-height: 0;
        }
    }

    @media screen and (max-width: 768px) {
        /* var(--screen-md) */
        padding: 1rem;

        .modal-wrapper {
            margin: 0;
            padding: 0 1rem 2rem;
            width: 100%;
        }
    }
}