<script setup lang="ts">
const note = useNote()
const parsedMarkdown = computed(() => {
    return stringToMarkdown(note.value.description)
})
</script>

<template>
    <div class="bg-secondary flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll px-12 py-4">
        <div class="h-full max-h-full w-full" v-html="parsedMarkdown">
        </div>
    </div>
</template>

<style scoped>
:deep(*) {
    @apply my-4 text-[#E6EDF3];
}

:deep(h1) {
    @apply mt-12;
}

:deep(h1),
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
    @apply border-lightgray border-b pb-2;
}

:deep(h1) {
    @apply text-4xl;
}

:deep(h2) {
    @apply text-2xl;
}

:deep(h3) {
    @apply text-lg;
}

:deep(h4) {
    @apply text-base;
}

:deep(h5) {
    @apply text-sm;
}

:deep(h6) {
    @apply text-xs;
}

:deep(ul li),
:deep(ol li) {
    @apply ml-8;
}

:deep(li) {
    @apply my-0;
}

:deep(input[type='checkbox']) {
    @apply mr-2;
}

:deep(pre) {
    @apply bg-lightgray p-2;
}

:deep(blockquote) {
    @apply border-l-4 border-l-[#E6EDF3] pl-4;
}
</style>
