<template>
    <div
        class="mosaic-modal theme-dark layout-grid-inner"
        @click="emit('close')"
    >
        <div class="window dl" @click.stop>
            <dl-row v-for="row in item.dl" :row="row" />
        </div>

        <div class="window content" @click.stop data-lenis-prevent>
            <h1 class="title">{{ item.title }}</h1>
            <strapi-content :content="item.content" />
        </div>

        <button class="window close" @click="emit('close')">Close X</button>
    </div>
</template>

<script setup>
const props = defineProps({ item: Object })

const emit = defineEmits(['close'])
</script>

<style lang="scss">
.mosaic-modal {
    position: fixed;
    inset: 0;
    align-items: flex-start;
    padding-top: desktop-vh(27px);

    .window {
        background: var(--theme-bg);
        color: var(--theme-fg);

        &.dl {
            padding: desktop-vw(12px) desktop-vw(10px);
            border-radius: desktop-vw(10px);
            display: flex;
            flex-direction: column;
            gap: desktop-vw(8px);
            grid-column: 4 / span 2;

            .dl-row:first-child {
                border-top: none;
            }
        }
        &.content {
            padding: desktop-vw(34px) desktop-vw(24px);
            border-radius: desktop-vw(10px);
            grid-column: 6 / span 7;
            max-height: desktop-vh(879px);
            overflow: auto;

            .title {
                text-align: center;
                margin-bottom: 1em;
            }
        }
        &.close {
            padding: desktop-vw(9px);
            border-radius: desktop-vw(16px);
            cursor: pointer;
            /* position: absolute;
            right: calc(
                (var(--layout-column-width) * 3) +
                    (var(--layout-column-gap) * 3) + var(--layout-margin)
            );
            top: desktop-vw(40px); */
            margin-right: auto;
            @include label;
        }
    }
}
</style>
