code-demo {
	--primer-color-base: 31, 31, 31;
	--color-base: rgb(var(--primer-color-base));
	--height: calc(var(--padding) * 2.5);

	min-width: 700px;
	border-radius: 12px;
	background-color: var(--color-base);
}

/* # Header */

code-demo .header {
	display: flex;
	height: var(--height);
	border-bottom: solid 1px rgba(255, 255, 255, .1);
}

code-demo .header button.inline {
	border: solid 1px rgba(255, 255, 255, .1);
	border-bottom: unset;
	border-radius: unset;
	box-shadow: unset;
}

code-demo .header button.inline:hover {
	box-shadow: unset;
}

code-demo .header button:first-child {
	margin-left: var(--height);
}

code-demo .header button.inline + button.inline {
	border-left: unset;
}

/* ## Active */

code-demo .header button.active {
	border-top: solid 4px var(--color-accent);
	pointer-events: none;
}

/* ## Languages */

code-demo .header button[data-lang="js"] {
	--primer-color-accent: 241, 224, 90;
	--color-accent: rgb(var(--primer-color-accent));
}

code-demo .header button[data-lang="css"] {
	--primer-color-accent: 81, 154, 186;
	--color-accent: rgb(var(--primer-color-accent));
}

code-demo .header button[data-lang="php"] {
	--primer-color-accent: 160, 116, 196;
	--color-accent: rgb(var(--primer-color-accent));
}

code-demo .header button[data-lang="html"] {
	--primer-color-accent: 221, 120, 49;
	--color-accent: rgb(var(--primer-color-accent));
}

/* # Body */

code-demo .body {
	padding: var(--padding);
}

/* ## Tabs */

code-demo .body [data-file] {
	display: none;
}

code-demo .body [data-file].active {
	display: initial;
}

/* # Syntax highliting */

code-demo .mtk1 { color: #cccccc; }
code-demo .mtk2 { color: #1f1f1f; }
code-demo .mtk3 { color: #d4d4d4; }
code-demo .mtk4 { color: #000080; }
code-demo .mtk5 { color: #6a9955; }
code-demo .mtk6 { color: #569cd6; }
code-demo .mtk7 { color: #b5cea8; }
code-demo .mtk8 { color: #646695; }
code-demo .mtk9 { color: #d7ba7d; }
code-demo .mtk10 { color: #9cdcfe; }
code-demo .mtk11 { color: #f44747; }
code-demo .mtk12 { color: #ce9178; }
code-demo .mtk13 { color: #6796e6; }
code-demo .mtk14 { color: #808080; }
code-demo .mtk15 { color: #d16969; }
code-demo .mtk16 { color: #dcdcaa; }
code-demo .mtk17 { color: #4ec9b0; }
code-demo .mtk18 { color: #c586c0; }
code-demo .mtk19 { color: #4fc1ff; }
code-demo .mtk20 { color: #c8c8c8; }
code-demo .mtk21 { color: #cd9731; }
code-demo .mtk22 { color: #b267e6; }
code-demo .mtki { font-style: italic; }
code-demo .mtkb { font-weight: bold; }
code-demo .mtks { text-decoration: line-through; }