pre {
	tab-size: 4;
	font-family: "Jetbrains Mono", "Consolas", monospace;
	font-variant-ligatures: none;

	.token-line {
		position: relative;
	}
}

.code-block-error-line {
	display: block;
	margin: 0 calc(-1 * var(--ifm-pre-padding));
	padding: 0 var(--ifm-pre-padding);
	background-color: #ff000020;
	border-left: 3px solid #ff000080;

	>.token:first-child {
		display: inline-block;
		margin-left: -3px;
	}
}

.code-block-highlighted-line {
	display: block;
	margin: 0 calc(-1 * var(--ifm-pre-padding));
	padding: 0 var(--ifm-pre-padding);
	background-color: #a6fff34d;
	border-left: 3px solid #7cffee;

	>.token:first-child {
		display: inline-block;
		margin-left: -3px;
	}
}

.code-block-warning-line {
	display: block;
	margin: 0 calc(-1 * var(--ifm-pre-padding));
	padding: 0 var(--ifm-pre-padding);
	background-color: #fff8e6FF;
	border-left: 3px solid #e6a700;

	>.token:first-child {
		display: inline-block;
		margin-left: -3px;
	}
}


html[data-theme='dark'] {

	.code-block-error-line {
		background-color: #ff000020;
		border-left-color: #ff000080;
	}

	.code-block-highlighted-line {
		background-color: #a6fff31a;
		border-left-color: #6fffec80;
	}

	.code-block-warning-line {
		background-color: #4d38004d;
		border-left-color: #e6a700;
	}

}


:root {
	// for light theme
	--codeblock-title-bg: rgb(242, 242, 242);

	// blueish radial gradient
	--codeblock-title-bg-gradient: rgb(252, 247, 214);

	--codeblock-title-color: rgb(20, 20, 20);
	--codeblock-title-border: rgb(128, 128, 128);
	--codeblock-border-color: rgb(207, 207, 207);
}


html[data-theme="dark"] {
	--codeblock-title-bg: rgb(24, 24, 24);
	--codeblock-title-bg-gradient: radial-gradient(circle, rgb(27, 35, 37) 0%, rgb(28, 32, 41) 40%, rgb(18, 25, 44) 70%);

	--codeblock-title-color: rgb(228, 228, 228);
	--codeblock-title-border: rgb(73, 73, 73);

	--codeblock-border-color: rgb(19, 19, 19);
}


.theme-code-block {
	border: 2px solid var(--codeblock-border-color);

	>div[class*='codeBlockTitle'] {
		// font-size: 90%;
		padding: 0.25em 0.8em;
		color: var(--codeblock-title-color);
		font-weight: normal;
		background: var(--codeblock-title-bg);
		// background: var(--codeblock-title-bg-gradient);
		border-bottom: 1px solid var(--codeblock-title-border);
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}
	
}

pre.prism-code+div button{
	opacity: 0.6 !important;
}

code-d {
	color: #339900;
	background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: inline-block;
}

// This is a bodge for <code> tags displaying equasions, until KaTeX is implemented
.no-break{
	display: inline-block;
}

.col-d {
	color: #339900;
}

.col-g {
	color: gray;
}

.col-lb {
	color: #569cd6;
}