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

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

<Fragment set:html={html} />

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

			list-style: none;
			counter-reset: steps-counter var(--sl-steps-start, 0);
			padding-inline-start: 0;
		}

		.sl-steps > li {
			counter-increment: steps-counter;
			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(steps-counter);
			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::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);
		}
	}

	@layer starlight.content {
		/* 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>
