/**
 * PX Menu Link - Reusable menu link with arrow reveal on hover.
 *
 * Used in: footer nav links, mega menu links.
 * Override via CSS custom properties on a parent or the element itself.
 */

.px-menu-link {
	--ml-font:       var(--font-display);
	--ml-weight:     var(--weight-medium);
	--ml-size:       var(--text-d1);
	--ml-lh:         var(--lh-normal);
	--ml-color:      var(--gray-dark);
	--ml-hover:      var(--action);
	--ml-bg:         var(--white);
	--ml-pad-y:      var(--space-d025);
	--ml-pad-x:      var(--space-d05);
	--ml-radius:     var(--radius-s);
	--ml-gap:        var(--space-d05);
	--ml-arrow-size: var(--space-d1);
	--ml-speed:      var(--duration-normal);
	--ml-ease:       var(--ease-smooth);

	display: inline-grid;
	grid-template-columns: auto 0fr;
	align-items: center;
	gap: 0;
	padding: var(--ml-pad-y) var(--ml-pad-x);
	margin-left: calc(-1 * var(--ml-pad-x));
	border-radius: var(--ml-radius);
	font-family: var(--ml-font);
	font-weight: var(--ml-weight);
	font-size: var(--ml-size);
	line-height: var(--ml-lh);
	color: var(--ml-color);
	text-decoration: none;
	transition: grid-template-columns var(--ml-speed) var(--ml-ease),
	            gap var(--ml-speed) var(--ml-ease),
	            background-color var(--ml-speed) var(--ml-ease),
	            color var(--ml-speed) var(--ml-ease);
}

.px-menu-link__arrow {
	display: flex;
	align-items: center;
	overflow: hidden;
	color: var(--ml-color);
}

.px-menu-link__arrow svg {
	width: var(--ml-arrow-size);
	height: var(--ml-arrow-size);
	flex-shrink: 0;
}

.px-menu-link:hover {
	background-color: var(--ml-bg);
	color: var(--ml-hover);
	text-decoration: underline;
	text-decoration-color: var(--ml-hover);
	grid-template-columns: auto 1fr;
	gap: var(--ml-gap);
}

.px-menu-link:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 2px;
}