body:has(.shiny.is-enlarged) {
    overflow: hidden;
}

.shiny {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--anresis-spacing-7);
    row-gap: var(--anresis-spacing-4);

    @media (max-width: 1023px) {
        grid-template-columns: minmax(0, 1fr);
    }


    .shiny-description {
        > h2 {
            &[data-always-show="0"] {
                display: none;
            }
        }

        .button {
            width: 100%;
        }

        .accordion-title {
            font: var(--anresis-font-text);
        }

        .accordion-trigger-icon {
            img {
                height: 20px;
                width: 20px;
            }
        }

        .accordion-container {
            display: none;
        }
    }

    .shiny-app-container {
        position: relative;
        iframe {
            width: 100%;
            height: 700px;
        }
    }

    .shiny-app-enlarge {
        display: flex;
        align-items: center;
        gap: var(--anresis-spacing-2);
        color: var(--anresis-color-primary-text);
        cursor: pointer;

        img {
            width: 16px;
            height: 16px;
            object-fit: contain;
            filter: var(--anresis-color-primary-filter);
        }

        &:hover {
            color: var(--anresis-color-primary-dark-text);
            img {
                filter: var(--anresis-color-primary-dark-filter);
            }
        }
    }

    .shiny-app-close {
        display: none;
    }

    &.is-enlarged {
        position: fixed;
        inset: 0;
        background-color: var(--anresis-color-white-background);
        padding: var(--anresis-spacing-8);
        z-index: 1000;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;


        @media (max-width: 1023px) {
            grid-template-columns: minmax(0, 1fr) !important;
        }


        .shiny-app-container {
            iframe {
                height: 100% !important;
            }
        }

        .shiny-description {
            display: block !important;
            overflow-y: auto;

            > h2 {
                display: block;
            }

            .accordion-container {
                display: flex;
            }
        }
        
        .shiny-app-enlarge {
            display: none;
        }

        .shiny-app-close {
            cursor: pointer;
            display: block;
            position: absolute;
            inset-block-start: -24px;
            inset-inline-end: -24px;
            > img {
                width: 24px;
                height: 24px;
            }
        }
    }
}