---
import { processSteps } from './rehype-steps';

const content = await Astro.slots.render('default');
const { html } = processSteps(content);
---

<Fragment set:html={html} />

<style is:global>
	.sl-steps {
		--bullet-size: calc(var(--sl-line-height) * 1rem);
		--bullet-margin: 0.375rem;

		list-style: none;
		padding-inline-start: 0;
	}

	.sl-steps > li {
		position: relative;
		padding-inline-start: calc(var(--bullet-size) + 1rem);
		/* HACK: Keeps any `margin-bottom` inside the `<li>`’s padding box to avoid gaps in the hairline border. */
		padding-bottom: 1px;
		/* Prevent bullets from touching in short list items. */
		min-height: calc(var(--bullet-size) + var(--bullet-margin));
	}
	.sl-steps > li + li {
		/* Remove margin between steps. */
		margin-top: 0;
	}

	/* Custom list marker element. */
	.sl-steps > li::before {
		content: counter(list-item);
		position: absolute;
		top: 0;
		inset-inline-start: 0;
		width: var(--bullet-size);
		height: var(--bullet-size);
		line-height: var(--bullet-size);

		font-size: var(--sl-text-xs);
		font-weight: 600;
		text-align: center;
		color: var(--sl-color-white);
		background-color: var(--sl-color-gray-6);
		border-radius: 99rem;
		box-shadow: inset 0 0 0 1px var(--sl-color-gray-5);
	}

	/* Vertical guideline linking list numbers. */
	.sl-steps > li:not(:last-of-type)::after {
		--guide-width: 1px;
		content: '';
		position: absolute;
		top: calc(var(--bullet-size) + var(--bullet-margin));
		bottom: var(--bullet-margin);
		inset-inline-start: calc((var(--bullet-size) - var(--guide-width)) / 2);
		width: var(--guide-width);
		background-color: var(--sl-color-hairline-light);
	}

	/* Adjust first item inside a step so that it aligns vertically with the number
			even if using a larger font size (e.g. a heading) */
	.sl-steps > li > :first-child {
		/*
		The `lh` unit is not yet supported by all browsers in our support matrix
		— see https://caniuse.com/mdn-css_types_length_lh
		In unsupported browsers we approximate this using our known line-heights.
		*/
		--lh: calc(1em * var(--sl-line-height));
		--shift-y: calc(0.5 * (var(--bullet-size) - var(--lh)));
		transform: translateY(var(--shift-y));
		margin-bottom: var(--shift-y);
	}
	.sl-steps > li > :first-child:where(h1, h2, h3, h4, h5, h6) {
		--lh: calc(1em * var(--sl-line-height-headings));
	}
	@supports (--prop: 1lh) {
		.sl-steps > li > :first-child {
			--lh: 1lh;
		}
	}
</style>