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

	display: block;
	min-width: 700px;
	border-radius: 12px;
	font-family: monospace;
	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 {
	--primer-color-accent: 255, 255, 255;
	--color-accent: rgb(var(--primer-color-accent));
}

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 {
	overflow: scroll;
	padding: var(--padding);
}

code-demo .body .view-line {
	white-space: pre;
}

/* ## Tabs */

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

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