---
import Icon from '../user-components/Icon.astro';

const { editUrl } = Astro.locals.starlightRoute;
---

{
	editUrl && (
		<a href={editUrl} class="sl-flex print:hidden">
			<Icon name="pencil" size="1.2em" />
			{Astro.locals.t('page.editLink')}
		</a>
	)
}

<style>
	@layer starlight.core {
		a {
			gap: 0.5rem;
			align-items: center;
			text-decoration: none;
			color: var(--sl-color-gray-3);
		}
		a:hover {
			color: var(--sl-color-white);
		}
	}
</style>
