/* Set default link colours */
.container {
	--container-color-link: var(--color-surface-darker);
	--container-color-link-hover-background: var(--color-yellow-500);
	--container-link-padding-inline: 0;
	--container-link-padding-block: 0;
}

/* Set inverse link colours on dark backgrounds */
.container:is(
	[data-theme="rich"],
	[data-theme="emphasis"]
) {
	--container-color-link: var(--color-surface-subtle);
	--container-color-link-hover-background: var(--color-black-950);
}

/* Apply styles to matching elements */
.content a:not(.button),
.anchor {
	color: var(--container-color-link);
	transition-property: margin, padding;
	transition-duration: var(--speed-blink);
	padding-inline: var(--container-link-padding-inline);
	padding-block: var(--container-link-padding-block);
	margin-inline: calc(var(--container-link-padding-inline) * -1);
	margin-block: calc(var(--container-link-padding-block) * -1);
}

.content a:hover:not(.button):not(:has(img, picture)),
.anchor:hover:not(:has(img, picture)) {
	--container-link-padding-inline: 0.125rem;
	--container-link-padding-block: 0.0675rem;
	background-color: var(--container-color-link-hover-background);
}

/* Change the default link colour when inside a dark-themed container */
.container:is(
	[data-theme="rich"],
	[data-theme="emphasis"]
)
:is(
	.content a:hover:not(.button),
	.anchor:hover
) {
	--container-color-link: var(--color-yellow-500);
}

.content a:active:not(.button),
.anchor:active {
	--container-link-padding-inline: 0.375rem;
	--container-link-padding-block: 0.25rem;
}

.content a:visited:not(.button),
.anchor:visited {
	opacity: 0.75;
}

.anchor:hover :is(img, picture) {
	filter: grayscale(50%);
	transition-duration: filter var(--speed-blink);
}