---
/**
 * A note beside the text.
 *
 * On a wide screen it sits in the margin; below that it folds into the flow as
 * an indented note. Use it for the aside that would otherwise become a
 * parenthesis three lines long.
 *
 *   <Aside>The lake is not actually a lake.</Aside>
 *   <Aside side="left" label="Note">…</Aside>
 */
interface Props {
	side?: 'right' | 'left';
	/** Small label above the note. */
	label?: string;
}

const { side = 'right', label } = Astro.props;
---

<aside class:list={['aside', `aside--${side}`]}>
	{label && <p class="eyebrow">{label}</p>}
	<slot />
</aside>

<style>
	.aside {
		font-family: var(--font-ui);
		font-size: var(--step--1);
		line-height: var(--leading-prose);
		color: var(--ink-muted);
		text-wrap: pretty;
	}

	/* Below the breakpoint the margin does not exist, so the note becomes an
	   indented block instead of being crushed into a sliver. */
	@media (width < 64rem) {
		.aside {
			border-inline-start: 1px solid var(--rule);
			padding-inline-start: var(--space-s);
			margin-block: var(--space-m);
		}
	}

	@media (width >= 64rem) {
		.aside {
			/* Pulled into the gutter and pinned to the top of the paragraph it
			   follows, without leaving the document flow. */
			inline-size: 13rem;
			margin-block: 0;
		}

		.aside--right {
			float: inline-end;
			margin-inline-end: -15rem;
			margin-inline-start: var(--space-m);
		}

		.aside--left {
			float: inline-start;
			margin-inline-start: -15rem;
			margin-inline-end: var(--space-m);
		}
	}
</style>