@font-face {
	font-family: "Inter";
	src: url("./static/Inter.ttf");
}

@font-face {
	font-family: "Monaspace Neon";
	src: url("./static/MonaspaceNeon.woff");
}

body {
	font-family: "Inter", sans-serif;
	height: 100vh;
	margin-top: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
}

#top {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

select {
	width: 11em;
	margin-bottom: 8px;
}

#build-arguments-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}

input[type="text"] {
	width: 20%;
}

#editors {
	display: flex;
	flex-direction: row;
	flex: 1; /* Takes remaining height */
	min-height: 0;
}

#editor,
#ir-editor {
	flex: 1;
	min-width: 0;
	min-height: 0;
}

.cm-editor {
	height: 100%;
	width: 100%;
}

.cm-editor .cm-content {
	font-family: "Monaspace Neon", Courier, monospace;
	font-variant-ligatures: none;
}

button {
	display: inline-block;
	padding: 0.2em 0.9em;
	line-height: 1.5em;
	margin: 8px 8px 0.5em 0;
	text-decoration: none;
	font-size: 0.8em;
	cursor: pointer;
	border: 0px;
	height: 2em;
	color: #333;
	border-radius: 4px;
	width: 12em;
}

button:hover:enabled {
	background-color: #ddd;
}

button:hover:disabled {
	cursor: default;
}

#output-wrapper {
	height: 25vh;
	display: flex;
	flex-direction: column;
}

#output-wrapper #buttons {
	display: flex;
	flex-direction: row;
	gap: 8px;
}

pre#output {
	font-family: "Monaspace Neon", Courier, monospace;
	background-color: rgb(230, 230, 230);
	flex: 1;
	padding: 1em;
	border-radius: 5px;
	margin: 0;
	overflow-x: auto;
	overflow-y: auto;
	min-height: 0;
}