/**
 * Link: .mk-link (templates/components/link.php).
 *
 * Typography per breakpoint from theme.json `custom.link.{mobile,tablet,desktop}`
 * (48rem / 64rem = `custom.breakpoint`). The short label shows below 48rem.
 * Provisional look until the Link spec arrives: accent colour, underline on hover.
 */

.mk-link {
	--mk-link-color: var(--wp--custom--color--text--accent);
	--mk-link-font-size: var(--wp--custom--link--mobile--font-size);
	--mk-link-line-height: var(--wp--custom--link--mobile--line-height);

	color: var(--mk-link-color);
	font-family: var(--wp--custom--link--font-family);
	font-size: var(--mk-link-font-size);
	font-weight: var(--wp--custom--link--font-weight);
	line-height: var(--mk-link-line-height);
	text-decoration: none;
	text-underline-offset: 0.2em;
	white-space: nowrap;
	transition-property: color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

@media (min-width: 48rem) {
	.mk-link {
		--mk-link-font-size: var(--wp--custom--link--tablet--font-size);
		--mk-link-line-height: var(--wp--custom--link--tablet--line-height);
	}
}

@media (min-width: 64rem) {
	.mk-link {
		--mk-link-font-size: var(--wp--custom--link--desktop--font-size);
		--mk-link-line-height: var(--wp--custom--link--desktop--line-height);
	}
}

.mk-link--inherit {
	--mk-link-color: currentcolor;
}

/* Small: body-small at every width (after the breakpoint rules above, so it wins). */
.mk-link--small {
	--mk-link-font-size: var(--wp--custom--text--body-small--font-size);
	--mk-link-line-height: var(--wp--custom--text--body-small--line-height);

	font-family: var(--wp--custom--text--body-small--font-family);
	font-weight: var(--wp--custom--text--body-small--font-weight);
	letter-spacing: var(--wp--custom--text--body-small--letter-spacing);
}

@media (hover: hover) {
	.mk-link:hover {
		text-decoration-line: underline;
	}

	.mk-link:not(.mk-link--inherit):hover {
		--mk-link-color: var(--wp--custom--color--interactive--hover);
	}
}

.mk-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);
}

.mk-link--inherit:focus-visible {
	outline-color: currentcolor;
}

/* Text button look (section heading): action colours, label-large at every width (after the
   breakpoint rules above, so it wins), arrow; no padding. */
.mk-link--text-button {
	--mk-link-color: var(--wp--custom--color--action--primary--default);
	--mk-link-font-size: var(--wp--custom--text--label-large--font-size);
	--mk-link-line-height: var(--wp--custom--text--label-large--line-height);

	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--button--text--gap);
	letter-spacing: var(--wp--custom--text--label-large--letter-spacing);
}

.mk-link--text-button .mk-icon {
	flex: none;
	inline-size: var(--wp--custom--button--text--icon-size);
	block-size: var(--wp--custom--button--text--icon-size);
}

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

		text-decoration-line: none;
	}
}

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

/* Text button look on a photo (promotion banner): the parent's colour in every state. */
.mk-link.mk-link--text-button.mk-link--inherit {
	--mk-link-color: currentcolor;
}

@media (hover: hover) {
	.mk-link.mk-link--text-button.mk-link--inherit:hover {
		text-decoration-line: underline;
	}
}

.mk-link__label--full {
	display: none;
}

@media (min-width: 48rem) {
	.mk-link__label--short {
		display: none;
	}

	.mk-link__label--full {
		display: inline;
	}
}

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