<script lang="ts">
let {
	width = "800px",
	center = false,
	children
}: {
	width?: string;
	center?: boolean;
	children?: import('svelte').Snippet;
} = $props();
</script>

<div class="width_container">
	<div class="block bubble" class:center style="width: {width};">
		{@render children?.()}
	</div>
</div>

<style>
.width_container {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: auto;
}
.block {
	display: block;
	text-align: initial;
	max-width: 100%;
	overflow-wrap: anywhere;
	/* margin: auto; */

	background-color: var(--shaded_background);
	backdrop-filter: blur(4px);
	padding: 8px;
}
.center {
	text-align: center;
}
</style>
