/**
 * @section Heading Anchors
 */

@layer kelp.core {
	.anchor-link {
		--color: inherit;
		--color-hover: inherit;
		--decoration: none;
		--decoration-hover: none;
	}

	.anchor-icon {
		color: var(--color-text-link);
	}

	@media (min-width: 38em) {
		kelp-heading-anchors[before] .anchor-link {
			text-indent: -1em;
		}
	}
}

@layer kelp.state {
	.anchor-link:hover .anchor-icon {
		color: var(--color-text-link-hover);
		text-decoration: var(--decoration-text-link-hover);
	}
}