@import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--sans-serif);
	tab-size: 2ch;
}

:root {
	--white: #efefef;
	--black: black;
	--blue: #563456;
	--gray: #ddd;
	--monospace: "Cascadia Code", monospace;
	--sans-serif: Arial, sans-serif;
}

body {
	background: var(--blue);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto 2fr 1fr;
	flex-direction: column;
	gap: 1em;
	padding: 1em;
	grid-template-areas:
		"header header"
		"config config"
		"input output"
		"input print";
	height: 100dvh;
}

#header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	letter-spacing: 0.1ch;
	font-weight: normal;
	color: var(--white);
	grid-area: header;

	a {
		font-family: inherit;
		color: inherit;
		text-decoration: none;
		letter-spacing: inherit;
	}
}

#fileStatus {
	letter-spacing: normal;
	font-family: var(--sans-serif);
	font-size: 1.5rem;
}

#ssmtFileStatus:not(:empty) {
	.unsaved &::after {
		content: "*";
	}
}

#smtFileStatus:not(:empty) {
	&::before {
		content: "▶ ";
		padding-left: 0.15em;
	}
}

#output, #inputPanel > *, #prints {
	overflow: auto;
	border: 1px var(--white) solid;
	padding: 0.75em;
	
	&, * {
		font-family: var(--monospace);
	}
}

#inputPanel {
	grid-area: input;
}

#prints {
	grid-area: print;
	color: var(--white);
	padding: 0;

	&::before {
		content: "Logs";
		display: block;
		padding: 0.2em;
		font-weight: bold;
		border-bottom: 2px var(--white) solid;
	}

	li {
		display: flex;
		padding: 0.2em;
		border-bottom: 1px var(--white) solid;
		white-space: pre;

		&::after {
			content: "line " attr(data-line);
			margin-left: auto;
		}
	}
}

#inputPanel {
	grid-area: input;
	position: relative;

	> * {
		position: absolute;
		inset: 0;
		font-size: 1em;
	}
}

#input {
	resize: none;
	color: transparent;
	caret-color: var(--black);
	white-space: pre;
}

#highlighting {
	pointer-events: none;
	overflow: auto;
	visibility: hidden;
	/* background: rgba(0, 0, 0, 0.5); */
	color: var(--black);

	* {
		visibility: visible;
	}
}

#output {
	grid-area: output;
	color: var(--white);
	font-size: 0.8rem;
}

#inputRow {
	grid-area: config;
	display: flex;
	flex-direction: row;
	gap: 1em;

	> * {
		label {
			color: var(--white);
		}
	}

	> :last-child {
		margin-left: auto;
	}
}

@media (max-width: 37rem) {
	#inputRow {
		flex-direction: column;

		label {
			display: inline-block;
			width: 3em;
		}
	}	
}

#inputRow > * > :last-child, button {
	background: var(--white);
	padding: 0.3em;
	border-radius: 0.3em;
	color: var(--black);
	border: none;
	font-size: 1rem;

	&:hover {
		background: var(--gray);
	}
}

button {
	cursor: pointer;
}

#notification {
	cursor: pointer;
	opacity: 0;
	position: absolute;
	left: 50%;
	top: 1em;
	transform: translateX(-50%) translateY(calc(-100% - 1em));
	padding: 1em;
	background: white;
	border-radius: 0.3em;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
	transition: all 0.3s;

	&.visible {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	&.error {
		color: white;
		background: red;
	}
}

.tm-storage-type {
	font-style: italic;
}