/* Heading anchor link styles */
.sl-markdown-content .heading-wrapper {
	--icon-size: 0.75em;
	--icon-spacing: 0.25em;
	line-height: var(--sl-line-height-headings);
}

:root {
	--sl-markdown-text-h2: 1.25em;
	--sl-markdown-text-h3: 1.125em;
	--sl-markdown-text-h4: 1em;
	--sl-markdown-text-h5: 0.875em;
}

/* Set font-size on wrapper element, so line-height, margins etc. match heading size. */
.sl-markdown-content {
	.level-h2 {
		font-size: var(--sl-markdown-text-h2);
		margin-top: 1.6em;
		margin-bottom: 0.8em;
	}

	h2 {
		font-size: var(--sl-markdown-text-h2);
	}

	.level-h3 {
		font-size: var(--sl-markdown-text-h3);
		margin-top: 1.56em;
		margin-bottom: 0.4em;
	}

	h3 {
		font-size: var(--sl-markdown-text-h3);
	}

	.level-h4 {
		font-size: var(--sl-markdowntext-h4);
		margin-top: 1.43em;
		margin-bottom: 0.58em;
	}

	h4 {
		font-size: var(--sl-markdown-text-h4);
	}

	.level-h5 {
		font-size: var(--sl-markdowntext-h5);
		margin-top: 1.35em;
		margin-bottom: 0.5em;
	}

	h5 {
		font-size: var(--sl-markdowntext-h5);
	}
}

.sl-markdown-content .heading-wrapper > :first-child {
	margin-inline-end: calc(var(--icon-size) + var(--icon-spacing));
	display: inline;
}

.sl-markdown-content .heading-wrapper svg {
	display: inline;
	width: var(--icon-size);
}

.sl-markdown-content .anchor-link {
	margin-inline-start: calc(-1 * (var(--icon-size)));
	color: var(--sl-color-gray-3);

	&:hover,
	&:focus {
		color: var(--sl-color-text-accent);
	}
}

@media (hover: hover) {
	.sl-markdown-content .anchor-link {
		opacity: 0;
	}
}

.sl-markdown-content .heading-wrapper:hover > .anchor-link,
.sl-markdown-content .anchor-link:focus {
	opacity: 1;
}

/* Float anchor links to the left of headings on larger screens. */
@media (min-width: 95em) {
	.sl-markdown-content .heading-wrapper {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		gap: var(--icon-spacing);
		margin-inline-start: calc(-1 * (var(--icon-size) + var(--icon-spacing)));
	}

	.sl-markdown-content .heading-wrapper > :first-child,
	.sl-markdown-content .anchor-link {
		margin: 0;
	}
}

/* Show blog/playground only as part of mobile hamburger menu */
.sidebar-content > ul > li:nth-child(1) {
	display: none;
}

.sidebar-content > ul > li:nth-child(2) {
	display: none;
}

@media (max-width: 50rem) {
	.sidebar-content > ul > li:nth-child(1) {
		display: block;
	}

	.sidebar-content > ul > li:nth-child(2) {
		display: block;
	}
}
