<script lang="ts">
	import { slide } from 'svelte/transition';

	export let hide = false;
	let hidden = true;
</script>

<section class="labelborder" class:hide class:hidden>
	<header
		on:click={() => {
			if (hide) hidden = !hidden;
		}}
		on:keydown={(ev) => {
			if (['Space', 'Enter'].includes(ev.key) && hide) hidden = !hidden;
		}}
		role="button"
		tabindex="0"
	>
		<slot name="header-full">
			<h3>
				<slot name="header" />
			</h3>
		</slot>
	</header>
	{#if !hide || !hidden}
		<div class="content" transition:slide>
			<slot />
		</div>
	{/if}
</section>

<style>
	section.labelborder {
		margin-top: 0.66rem;
		transition: opacity 0.5s ease-in-out;

		& header {
			display: flex;
			align-items: end;
			justify-content: space-between;

			border-bottom: 1px solid var(--foreground);
			padding-bottom: 0.33rem;
			margin-bottom: 0.33rem;

			& h3 {
				margin: 0;
			}
		}

		&.hide {
			& header {
				cursor: pointer;
			}
		}

		&.hide.hidden {
			opacity: 0.66;
		}
	}
</style>
