@use 'variables';

$code-background-color: darken(variables.$background-color, 5%);
$code-background-color-dark: lighten(variables.$background-color-dark, 5%);

:root {
	--code-background: #{$code-background-color};

	@media (prefers-color-scheme: dark) {
		--code-background: #{$code-background-color-dark};
	}
}

code {
	background: var(--code-background);
	padding: 0.125em 0.25em;
	border: solid 1px var(--primary-border-color);
	border-radius: calc(var(--main-border-radius) / 2);
}

pre {
	background: var(--code-background);
	padding: 1em;
	border: solid 1px var(--primary-border-color);
	border-radius: calc(var(--main-border-radius) / 2);

	code {
		background: unset;
		padding: unset;
		border: unset;
		border-radius: unset;
	}
}