/* Button */
.btn-primary {
	background: var(--primary-ultra-dark);
	color: white;
	padding: 0.5em 2em;
	border-radius: 50vmax;
	display: inline-flex;
	gap: 1rem;
	transition: 0.2s ease-out;
}
@media screen and (min-width: 1026px) {
	.btn-primary:is(:hover, :focus-visible) {
		background: var(--primary);
		color: white;
	}
	.bg--dark .btn-primary:is(:hover, :focus-visible) {
		background: white;
		color: var(--primary-ultra-dark);
	}
}

/* Button */
.btn-secondary.btn-secondary {
	color: var(--primary-ultra-dark);
	background: white;
	padding: 0.5em 2em;
	border-radius: 50vmax;
	display: inline-flex;
	gap: 1rem;
}
@media screen and (min-width: 1026px) {
	.btn-secondary.btn-secondary.btn-secondary:is(:hover, :focus-visible) {
		color: white;
		background: var(--primary);
	}
}

/* Link primary */
.link-primary {
	display: inline-flex;
	gap: 8px;
	color: var(--primary);
	position: relative;
	width: fit-content;
}
.link-primary span {
	left: 0;
	transition: 0.2s ease-out;
}
.link-primary svg {
	transition: 0.2s ease-out;
}
.link-primary svg.initial {
	transition:
		opacity 0.1s ease-out,
		transform 0.2s ease-out;
}
.link-primary svg.hover {
	opacity: 0;
	transform: translateX(20px) translateY(-50%);
	position: absolute;
	left: 0;
	top: 50%;
}

/* Hover states - direct and via clickable-hover-trigger */
@media screen and (min-width: 1026px) {
	.link-primary:is(:hover, :focus-visible) span,
	.clickable-hover-trigger:has(a.clickable-parent:is(:hover, :focus-visible)) .link-primary span {
		transform: translateX(14px);
	}

	.link-primary:is(:hover, :focus-visible) svg.initial,
	.clickable-hover-trigger:has(a.clickable-parent:is(:hover, :focus-visible)) .link-primary svg.initial {
		opacity: 0;
		transform: translateX(-15px);
	}

	.link-primary:is(:hover, :focus-visible) svg.hover,
	.clickable-hover-trigger:has(a.clickable-parent:is(:hover, :focus-visible)) .link-primary svg.hover {
		opacity: 1;
		transform: translateX(0) translateY(-50%);
	}
}

.link-primary--highlight {
	font-size: var(--h6);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--h6-letter-spacing);
}