<script lang="ts">
	import { type Snippet } from "svelte";
	interface Props {
		children?: Snippet;
	}

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

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

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

	div.bookshelf {
		width: 80%;
		margin: 0 auto;
		min-height: calc(bookshelf.$height + bookshelf.$shelf-width);
		background-image: linear-gradient(
			color.scale(bookshelf.$color, $lightness: -32%),
			color.scale(bookshelf.$color, $lightness: -30%) bookshelf.$height,

			color.scale(bookshelf.$color, $lightness: bookshelf.$shadow-pct)
				bookshelf.$height,
			color.scale(bookshelf.$color, $lightness: bookshelf.$shadow-pct)
				calc(bookshelf.$height + bookshelf.$shadow-width),
			bookshelf.$color bookshelf.$height,
			bookshelf.$color calc(bookshelf.$height + bookshelf.$shelf-width),
			color.scale(
					bookshelf.$color,
					$lightness: -1 * bookshelf.$shadow-pct
				)
				calc(
					bookshelf.$height + bookshelf.$shelf-width -
						bookshelf.$shadow-width
				),
			color.scale(
					bookshelf.$color,
					$lightness: -1 * bookshelf.$shadow-pct
				)
				calc(bookshelf.$height + bookshelf.$shelf-width)
		);
		background-size: 10px calc(bookshelf.$height + bookshelf.$shelf-width);
		border: 10px bookshelf.$color solid;
		padding-left: bookshelf.$book-spacing;
		padding-right: bookshelf.$book-spacing;

		display: flex;
		flex-wrap: wrap;
		gap: bookshelf.$shelf-width bookshelf.$book-spacing;

		container: bookshelf / inline-size;
		@container bookshelf (width < 600px) {
			width: 100%;
		}
	}
</style>
