/**
	 * Container for user generated content with styles for all common HTML
	 * elements.
	 */
@utility prose {
	font-family: var(--font-body);
	font-weight: var(--font-weight-normal);
	line-height: var(--leading-normal);

	/* Block margin */
	&
		:is(
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			ul,
			ol,
			dl,
			dd,
			p,
			pre,
			table,
			blockquote,
			form,
			iframe,
			img,
			hr,
			address
		) {
		margin-bottom: var(--spacing-block-margin);
	}

	/* Max reading width */
	& :is(h1, h2, h3, h4, h5, h6, p, li, blockquote) {
		max-width: var(--spacing-text-max-width);
	}

	/* Links */
	& a {
		color: var(--color-primary);
		text-decoration: underline;
	}

	& a:hover {
		color: var(--color-accent);
		cursor: pointer;
	}

	& a:focus-visible {
		outline: var(--border-width-focus) solid var(--color-accent);
		outline-offset: var(--border-width-focus-offset);
		border-radius: 0.05em;
	}

	/* Blockquotes */
	& blockquote {
		margin-inline: --spacing(8);
		font-size: var(--text-sm);
	}

	& blockquote p {
		margin-bottom: calc(var(--spacing-block-margin) / 2);
	}

	& cite {
		font-style: italic;
	}

	& hr {
		border: 0;
		background: var(--color-border);
	}

	/* Responsive images and full bleed images */
	& :is(p > img, p > a > img, figure > img, figure > a > img) {
		height: auto;
		max-width: calc(100% + var(--spacing-content-padding-x) * 2);
		margin-inline: calc(var(--spacing-content-padding-x) * -1);
		margin-block: calc(var(--spacing-block-margin) * 2);

		@media (width >= 48rem) {
			max-width: 100%;
			margin-inline: auto;
		}
	}

	/* Tables */
	& table {
		font-size: var(--text-sm);
		border-collapse: collapse;
		width: 100%;
	}

	& thead {
		text-align: left;
		border-bottom: 2px solid var(--color-border);
	}

	& :is(td, th) {
		text-align: left;
		border-bottom: 1px solid var(--color-border);
		padding: calc(var(--spacing-block-margin) / 2);
	}

	& td {
		vertical-align: top;
	}

	& :is(th:first-child, td:first-child) {
		padding-left: 0;
	}

	& :is(th:last-child, td:last-child) {
		padding-right: 0;
	}

	& :is(tr:last-child th, tr:last-child td) {
		border: 0;
	}

	/* Headings */
	& :is(h1, h2, h3, h4, h5, h6) {
		margin-top: var(--spacing-heading-margin-top);
		font-family: var(--font-heading);
		line-height: var(--leading-heading);
		font-weight: var(--font-weight-heading);
		text-wrap: balance;
	}

	& h1 {
		font-size: var(--text-xl);
	}

	& h2 {
		font-size: var(--text-lg);
	}

	& h3 {
		font-size: var(--text-base);
		line-height: var(--leading-normal);
		font-weight: var(--font-weight-bold);
	}

	& h4 {
		font-size: var(--text-md);
		line-height: var(--leading-normal);
		font-style: italic;
	}

	& h5 {
		font-size: var(--text-base);
		line-height: var(--leading-normal);
	}

	/* Collapse margin between headings and before first heading */
	&
		:is(
			h1 + h2,
			h2 + h3,
			h3 + h4,
			h4 + h5,
			h5 + h6,
			h1:first-child,
			h2:first-child,
			h3:first-child,
			h4:first-child,
			h5:first-child,
			h6:first-child
		) {
		margin-top: 0;
	}

	/* Unordered list with dashes (—) as bullets and basic ordered list */
	& ol {
		list-style: decimal;
		padding-left: var(--spacing-list-margin);

		/* Hanging markers on big screens */
		@media (width >= 48rem) {
			padding-left: 0;
			margin-left: calc(var(--spacing-list-margin) * -1);
		}
	}

	& li {
		padding-left: calc(var(--spacing-block-margin) / 2);
	}

	& :is(li > ul, li > ol) {
		margin-bottom: 0;
	}

	& :is(ul > ul, ul > ol) {
		margin-left: var(--spacing-list-margin);
	}

	/* Unordered list with em-dash bullets */
	& ul > li {
		position: relative;
		padding-left: var(--spacing-list-margin);
		margin-left: 0;
	}

	& ul > li::before {
		content: '\2014\a0';
		position: absolute;
		left: 0;
	}

	/* Code */
	& :is(h1, h2, h3, h4, h5, h6, p, li, table) :is(code, kbd) {
		font-family: inherit;
		font-style: italic;
		font-feature-settings: normal;
		font-variation-settings: normal;
		hyphens: none;
	}

	& :is(h1, h2, h3, h4, h5, h6, p, li, table) a :is(code, kbd) {
		font-style: inherit;
	}

	/* Don't leak the margin after the last element outside of the component */
	& > *:last-child {
		margin-bottom: 0;
	}
}

/**
 * Prose small variant: smaller body text.
 */
@utility prose-small {
	p {
		font-size: var(--text-sm);
	}
}

/**
 * Prose intro variant: larger and italicized body text.
 */
@utility prose-intro {
	p {
		font-size: var(--text-lg);
		font-style: italic;
	}
}