/**
 * Text link: .mk-text-link (templates/components/text-link.php).
 * Tokens: theme.json `color.textLink` (default / hover / active).
 *
 * Takes the font of the text around it. Hover: darker + underline; pressed:
 * darkest. --underline: underlined in every state.
 */

.mk-text-link {
	--mk-text-link-color: var(--wp--custom--color--text-link--default);

	color: var(--mk-text-link-color);
	font: inherit;
	text-decoration-line: none;
	text-underline-offset: 0.2em;
	transition-property: color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

.mk-text-link--underline {
	text-decoration-line: underline;
}

@media (hover: hover) {
	.mk-text-link:hover {
		--mk-text-link-color: var(--wp--custom--color--text-link--hover);

		text-decoration-line: underline;
	}
}

.mk-text-link:active {
	--mk-text-link-color: var(--wp--custom--color--text-link--active);
}

.mk-text-link:focus-visible {
	border-radius: var(--wp--preset--border-radius--3);
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}

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