/* stylelint-disable property-no-unknown, selector-pseudo-element-no-unknown */
.ReactModalPortal-FullscreenModal {
    .ReactModal__Overlay {
        opacity: 1;
        transition: margin-top 250ms;
        background-color: var-with-opacity(--midnight-900, 50%);

        .ReactModal__Content {
            height: 100%;
            view-transition-name: fullscreen-modal;
            scale: 1;
            transform: translateY(100%);
            transition-timing-function: ease-in;

            &--after-open {
                transform: translateY(0%);
            }

            &-close-transition {
                transform: translateY(100%);
            }
        }
    }
}

.FullscreenModal {
    background-color: var(--container-fills-backgrounds-page);
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: calc(100% - 20px);
    position: relative;
    top: 10px;
    transition: opacity 500ms;
    opacity: 1;
    padding: 32px 40px 0;

    &-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 40px;

        &-left,
        &-right {
            display: flex;
            flex: 1;
            align-items: center;
        }

        &-app {
            align-items: center;
            display: flex;
            margin-right: 32px;
            gap: 8px;

            .AppIcon {
                height: 32px;
                width: 32px;
            }

            &-name {
                font-weight: 500;
                margin: unset;
            }
        }

        &-border {
            flex-grow: 1;
            border-bottom: 1px solid black;
            border-color: var(--dividers-default);
            height: 0;
        }

        &-title {
            @include text-body-bold;

            margin: 0 32px;
            color: var(--text-secondary);
        }

        &-actions {
            display: flex;
            flex-direction: row;
            margin-left: 32px;
            height: 40px;
            gap: 20px;
        }
    }

    &-body-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-grow: 1;
        overflow: hidden;

        .SuiteSidebarPortal {
            position: relative;
            right: -40px;
        }
    }

    &-body {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        width: 100%;
        flex-grow: 1;
        margin-top: 20px;

        &-content {
            overflow: auto;
            width: 100%;
            height: 100%;
        }

        &::before,
        &::after {
            content: '';
            display: block;
            width: 100%;
            height: 40px;
            position: absolute;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            pointer-events: none;
            z-index: 1;
        }

        &-scrollTop::before {
            top: 0;
            background: linear-gradient(
                var-with-opacity(--container-fills-backgrounds-page, 100%),
                var-with-opacity(--container-fills-backgrounds-page, 0%)
            );
            opacity: 1;
        }

        &-scrollBottom::after {
            bottom: 0;
            background: linear-gradient(rgb(247 247 247 / 0%), rgb(247 247 247 / 100%));
            background: linear-gradient(
                var-with-opacity(--container-fills-backgrounds-page, 0%),
                var-with-opacity(--container-fills-backgrounds-page, 100%)
            );
            opacity: 1;
        }
    }

    &-title {
        width: 480px;
        text-align: center;
        align-self: center;
        margin-top: 20px;

        &-info {
            color: var(--text-secondary);
        }
    }

    &-footer {
        display: flex;
        margin: 20px 0 32px;
        width: 100%;
        justify-content: flex-end;
    }

    &-fluid {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 32px;
        width: fit-content;
        height: 100%;
        gap: 20px;

        .FullscreenModal {
            &-header {
                position: absolute;
                top: 32px;
                left: 40px;
                right: 40px;
                align-items: center;
            }

            &-body {
                flex-grow: 0;
                width: fit-content;
                min-width: 500px;

                &-container {
                    flex-grow: 0;
                }
            }
        }
    }
}

@keyframes slideout {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(100%);
    }
}

::view-transition-old(fullscreen-modal) {
    animation-name: slideout;
    animation-duration: 500ms;
    animation-timing-function: ease-out;
}