h1,
h2,
h3,
h4,
h5,
h6 {
	&:hover .zola-anchor {
		transform: translateY(-0.125em);
		opacity: 1;

		:root[dir*="rtl"] & {
			transform: translateY(-0.125em);
		}
	}
}

.zola-anchor {
	position: absolute;
	transform: translateX(0.5rem) translateY(-0.125em);
	opacity: 0;
	transition: var(--transition);
	margin-inline-start: calc(-1em + -0.5rem);
	color: var(--fg-muted-4);
	line-height: 1;

	@media only screen and (max-width: 832px) {
		display: none;
	}

	:root[dir*="rtl"] & {
		transform: translateX(-0.5rem) translateY(-0.125em);
	}

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

	&:active {
		transform: var(--active);
	}

	&:focus-visible {
		opacity: 1;
	}

	.icon {
		-webkit-mask-image: var(--icon-link);
		mask-image: var(--icon-link);
		mask-size: cover;
		transition: var(--transition);
		width: 1em;
		height: 1em;

		:root[dir*="rtl"] & {
			transform: scaleX(-1);
		}
	}
}

:target .zola-anchor {
	color: var(--accent-color-alpha);
}