<script lang="ts">
	export let bereich: string;
	export let title: string;
	let open: boolean = true;
	let collapse: HTMLDivElement;
</script>

<div class="bereichs-label w-full">

		<div
			class="grid grid-cols-[max-content_1fr_max-content] items-center justify-items-start gap-2"
		>
			<div class="formular-abschnitt1">{bereich}</div>
			<div class="formular-abschnitt2">{title}</div>
			<div
				class="justify-self-end self-center cursor-pointer text-[1.25rem] ring-1 ring-secondary px-2 rounded-sm select-none"
				on:click={() => {
					open = !open
				}}
			>
				{#if open}
					-
				{:else}
					+
				{/if}
			</div>
		</div>
	</div>

<div class="collapseBereich" bind:this={collapse} class:max-h-0={!open} class:overflow-hidden={!open} class:max-h-[3000px]={open} class:overflow-visible={open}>
	<slot></slot>
</div>