<script lang="ts">
	import type { Snippet } from "svelte";

	interface Props {
		children?: Snippet;
	}

	let { children }: Props = $props();
</script>

<div class="bookshelf-item">
	{@render children?.()}
</div>

<style lang="scss">
	@use "./variables.scss" as bookshelf;

	div.bookshelf-item {
		box-sizing: border-box;
		height: bookshelf.$height;
		display: flex;
		align-items: end;

		// Why????
		padding-bottom: 0.75px;
		&:global(:has(.book.tilted)) {
			padding-bottom: 0;
		}
	}
</style>
