/*
 * Text link.
 *
 * 15 / 600 in the link colour with a 40% underline that goes solid on hover
 * (D23), offset 4px everywhere (N2). An optional glyph after the label:
 * arrow for a route, download or external for what the link does.
 *
 *   <a class="vdt-link" href="…">View support <?= svg('assets/icons/glyphs/arrow-right.svg') ?></a>
 *
 * In the footer the same class reads white with a .3 underline, because the
 * footer is a dark theme and the tokens move with it.
 */

@layer vdt.components {
	.vdt-link {
		display: inline-flex;
		align-items: center;
		gap: var(--vdt-space-8);
		color: var(--vdt-link);
		font-size: var(--vdt-size-link);
		font-weight: var(--vdt-weight-semibold);
		line-height: 1.3;
		text-decoration: underline;
		text-decoration-color: var(--vdt-link-underline);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.25rem;
		transition: color var(--vdt-duration) var(--vdt-easing), text-decoration-color var(--vdt-duration) var(--vdt-easing);
	}

	.vdt-link svg {
		flex: none;
		width: var(--vdt-glyph-link);
		height: var(--vdt-glyph-link);
	}

	.vdt-link:hover {
		color: var(--vdt-link-hover);
		text-decoration-color: currentColor;
	}

	/* A link that stands for the whole card or row: no underline until hover. */
	.vdt-link--quiet {
		text-decoration-color: transparent;
	}

	.vdt-link--quiet:hover {
		text-decoration-color: currentColor;
	}

	/* Body-size links inside prose and contact details: 20 with the purple underline. */
	.vdt-link--lg {
		font-size: var(--vdt-size-lead);
		font-weight: var(--vdt-weight-medium);
	}

	/*
	 * A whole-card or whole-row link (topic cards, product support cards):
	 * the anchor covers the card, the heading lifts to the link colour on
	 * hover (D23), and the focus ring goes on the card.
	 */
	.vdt-link-cover {
		position: relative;
	}

	.vdt-link-cover__target::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.vdt-link-cover:has(.vdt-link-cover__target:hover) .vdt-link-cover__heading {
		color: var(--vdt-link-hover);
	}

	.vdt-link-cover:has(.vdt-link-cover__target:focus-visible) {
		outline: var(--vdt-focus-width) solid var(--vdt-focus-ring);
		outline-offset: var(--vdt-focus-offset);
	}

	.vdt-link-cover .vdt-link-cover__target:focus-visible {
		outline: none;
	}
}