<script lang="ts">
	
	import type { Snippet } from "svelte";
	
	let { id, label, children } : { id: string, label: string, children: Snippet } = $props(); 
	
	let _id = id + "_check";
</script>

<input type="checkbox" id={_id} style:display="none">
<label for={_id}>
	<span class="twister closed"><span class="twister-inner">&#x25b7;</span></span><span class="twister open"><span class="twister-inner">&#x25bd;</span></span>{label}
</label>
<div class="hidden">
	{@render children?.()}
</div>

<style>

label {
	display: block;
	width: 100%;
	border-bottom: 1px solid black;
}

.twister {
	width: 1ch;
	padding-right: 2ch;
}

.twister-inner {
	height: 100%;
	
	vertical-align: middle;
	font-size: 11px;
}

.open {
	display: none;
}
.closed {
	display: inline-block;
}

.hidden {
	display: none;

	padding-top: 5px;
	padding-left: 3ch;
}

:checked + label + .hidden {
	display: block;
}
:checked + label .closed {
	display: none;
}
:checked + label .open {
	display: inline-block;
}

</style>
