<script setup>
defineProps({
  title: {
    type: String,
    required: true
  }
})
</script>

<template>
  <details class="prose-toggle my-6 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] p-5">
    <summary class="prose-toggle__summary cursor-pointer text-[15px] font-semibold leading-7 text-[var(--site-text)]">
      {{ title }}
    </summary>
    <div class="prose-toggle__body mt-4 whitespace-pre-line text-[15px] leading-8 text-[var(--site-muted)]">
      <slot />
    </div>
  </details>
</template>
