:root {
	--active-link-thickness: 0.3rem;
}

a {
	color: var(--color-primary);
	text-decoration: none;

	/* Only apply the underline appearance to links without the class of 'button', 'article__topic', or 'header__logo'. */
	&:not(.button, .article__topic, .header__logo) {
		text-decoration-line: underline;
		text-decoration-color: var(--color-accent);
		text-decoration-thickness: 0.1rem;
		text-underline-offset: 0.4rem;
	}

	/* Only apply this style to active menu links and on link hover for links without the class of 'button', 'article__topic', or 'header__logo'. */
	&:not(.button, .article__topic, .header__logo):hover, &.active {
		text-decoration-color: var(--color-primary);
		text-decoration-thickness: var(--active-link-thickness);
	}

	/* If a link has a heart icon, then simulate the "a" link hover decoration using a border so that we account for the heart spacing. */
	&.active:has(svg):has(.heart) {
		text-decoration: none;
		border-bottom: var(--active-link-thickness) solid var(--color-primary);
		padding-bottom: 0.2rem;
	}

}