pre {
	font-style: normal;
	font-weight: normal;
	background: var(--neutral-darker);
	background: var(--code-background);
	padding: 1.5em;
	margin: var(--half-note) auto;
	color: var(--neutral-white);
	font-size: 0.8rem;
	overflow: auto;
	line-height: 1.5;
	width: 100%;

	code {
		background: transparent;
		font-size: inherit;
		padding: 0;
		border: 0;
	}
}

.dark {
	code {
		background: var(--blue-900);
		border-color: var(--blue-700);
	}

	pre code {
		background: transparent;
	}
}

code {
	font-size: 0.8em;
	background: var(--blue-50);
	padding: 0.2em 0.3em 0.2em;
	border-radius: 2px;
	border: 1px solid var(--blue-200);
	line-height: 1 !important;
	white-space: nowrap;
	font-style: normal;
}

code,
pre {
	font-family: var(--code-font);
	font-variant: none;

	&[class*='language-'] {
		color: #f8f8f2;
		background: none;
		text-shadow: 0 1px rgba(0, 0, 0, 0.3);
		font-family: var(--code-font);
		font-display: swap;
		font-size: 0.75rem;
		text-align: left;
		white-space: pre;
		word-spacing: normal;
		word-break: normal;
		word-wrap: normal;
		line-height: 1.5;

		-moz-tab-size: 2;
		-o-tab-size: 2;
		tab-size: 2;

		-webkit-hyphens: none;
		-moz-hyphens: none;
		-ms-hyphens: none;
		hyphens: none;
	}
}

/* Code blocks */
pre[class*='language-'] {
	padding: var(--half-note) var(--eighth-note) var(--eighth-note);
	margin: var(--half-note) 0;
	overflow: auto;
	position: relative;
	width: 100%;

	&::before {
		content: 'Code';
		top: 0;
		left: 0;
		font-size: 0.8rem;
		font-weight: normal;
		font-family: var(--heading-font);
		padding: 0.3rem var(--eighth-note);
		width: 100%;
		position: absolute;
		background: var(--blue-dark);
		background: linear-gradient(to right, var(--blue-dark), transparent);
	}
}

pre.language-undefined {
	padding-top: var(--quarter-note);

	&::before {
		display: none;
	}
}

pre.language-bash:before {
	content: 'Terminal';
}

pre.language-fs:before {
	content: 'Project files';
}

pre.language-css:before {
	content: 'CSS';
}

pre.language-php:before {
	content: 'PHP';
}

pre.language-markdown:before {
	content: 'Markdown';
}

pre.language-html:before {
	content: 'HTML';
}

pre.language-vue:before {
	content: 'Vue';
}

pre.language-svelte:before {
	content: 'Svelte';
}

pre.language-jsx:before {
	content: 'React';
}

pre.language-js:before,
pre.language-javascript:before {
	content: 'JavaScript';
}

:not(pre) > code,
pre {
	&[class*='language-'] {
		background: var(--code-background);
	}
}

/* Inline code */
:not(pre) > code[class*='language-'] {
	padding: 0.1em;
	border-radius: 0.3em;
	white-space: normal;
}

.token {
	&.comment,
	&.prolog,
	&.doctype,
	&.cdata {
		color: #7970a9;
	}

	&.parameter {
		color: #ffc97c;
	}

	&.punctuation {
		color: #f2f2f2;
	}

	&.namespace {
		opacity: 0.8;
	}

	&.property,
	&.tag,
	&.constant,
	&.symbol,
	&.deleted {
		color: #ff80bf;
	}

	&.boolean,
	&.number {
		color: #9580ff;
	}

	&.selector,
	&.attr-name,
	&.string,
	&.char,
	&.builtin,
	&.inserted {
		color: #ffff80;
	}

	&.operator,
	&.entity,
	&.url,
	&.variable {
		color: #ff80bf;
	}

	&.atrule,
	&.attr-value,
	&.function,
	&.class-name {
		color: #8aff80;
	}

	&.keyword {
		color: #ff80bf;
	}

	&.regex,
	&.important {
		color: #fc9867;
	}

	&.important,
	&.bold {
		font-weight: bold;
	}
	&.italic {
		font-style: italic;
	}

	&.entity {
		cursor: help;
	}
}

.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}