/**
 * Link components
 *
 * `.link-mono` is the small underlined uppercase mono link used for every
 * call to action outside of buttons — Shop Collection, View All, Read More.
 */

.link-mono {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	line-height: 1.4;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-heading);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.5em;
	transition: color var(--transition-fast), text-underline-offset var(--transition-fast);
}

.link-mono:hover {
	color: var(--color-primary-hover);
	text-underline-offset: 0.35em;
}

.link-mono--muted {
	color: var(--color-muted);
}

.link-mono--inverse {
	color: var(--color-inverse);
}

.link-mono--inverse:hover {
	color: var(--sage);
}

/* Plain link that only underlines on hover. */
.link-quiet {
	text-decoration: none;
	color: inherit;
}

.link-quiet:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
	.link-mono {
		transition: none;
	}
}