* {
	font-family: var(--font);
	line-height: 1.3;
}

body {
	--primary: light-dark(white, #181A1B);
	--secondary: light-dark(#EFEFEF, #212425);
	--timestamp: light-dark(#555555, #AAAAAA);
	--error: #ff3333;
}

body {
	--small-gap: 5px;
	--font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	--monospace: 'Courier New', Courier, monospace;

	nav {
		display: flex;
		justify-content: space-between;
		align-items: center;

		section:last-child {
			display: flex;
			gap: var(--small-gap);
		}
	}

	main {
		margin-top: var(--small-gap);
		display: flex;
		flex-direction: column;
		gap: var(--small-gap);
	}
}

div.toggle {
	display: inline-block;

	label {
		box-sizing: border-box;
		display: inline-block;
		padding: var(--small-gap);
		background: var(--primary);
		border: solid 2px var(--primary);
		color: black;
		font-weight: 600;
		cursor: pointer;
		user-select: none;
	}

	input:checked+label {
		background: var(--secondary);
		border: solid 2px var(--secondary);
	}

	label:hover {
		border: solid 2px var(--secondary);
	}

	input:checked+label:hover {
		border: solid 2px var(--primary);
	}
}

div.preview {
	margin: var(--small-gap) 0px;
	display: flex;
	flex-direction: column;
	gap: var(--small-gap);

	div.info {
		display: flex;
		gap: var(--small-gap);

		span[apply=timestamp] {
			color: var(--timestamp);
		}
	}

	div.stat {
		display: flex;

		svg {
			height: 18px;
		}
	}

	div.code {
		position: relative;

		nav {
			position: absolute;
			right: 0;
			padding: var(--small-gap);

			button {
				display: flex;
				padding: 0;
			}
		}
	}
}

svg {
	fill: black;
}

form {
	display: flex;
	flex-direction: column;
	gap: var(--small-gap);


	.error {
		color: var(--error);
		text-align: center;
	}

}

textarea {
	outline: none;
	border: none;
	background: var(--secondary);
	padding: var(--small-gap);
	padding-top: calc(var(--small-gap) * 1.5);
	font-family: var(--monospace);
	resize: none;
	tab-size: 4;
}

pre {
	background: var(--secondary);
	padding: var(--small-gap);
	padding-top: calc(var(--small-gap) * 1.5);
	margin: 0px;
	font-family: var(--monospace);
	tab-size: 4;
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

input {
	font-size: inherit;
	outline: none;
	border: none;
	background: var(--secondary);
	padding: var(--small-gap);
}

input:is(:hover, :focus) {
	background: var(--primary);
}

button {
	border: none;
	outline: none;
	font-size: inherit;
	background: var(--secondary);
}

button:hover:not(:active) {
	background: var(--primary);
}

code {
	font-family: var(--monospace);
	line-height: 1;
}

div.name-and-wasm-toggle {
	display: flex;
	gap: var(--small-gap);

	>input,
	>div.placeholder {
		flex: 1;
	}

	>div.placeholder {
		align-content: center;
	}
}

div#code-editor {
	display: flex;
	position: relative;

	textarea {
		flex: 1;
		caret-color: black;
		position: absolute;
		background: transparent;
		color: transparent;
		caret-color: black;
		font-size: inherit;
		top: 0;
		left: 0;
		right: 0;
		inset: 0;
		overflow: hidden;
	}

	pre#highlighter {
		inset: 0;
		flex: 1;
	}

	span#code-size {
		position: absolute;
		right: 2px;
		font-size: 12px;
	}
}

div#dep-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--small-gap);

	section {
		width: 100%;
		display: flex;
		flex-direction: column;
		text-align: center;
		gap: var(--small-gap);

		div {
			text-align: left;
		}
	}
}

.syn {
	font-family: var(--monospace);

	&.Comment {
		color: #939f91;
	}

	&.Keyword {
		color: #f85552;
	}

	&.Identifier,
	&.Directive {
		color: #3a94c5;
	}

	/* &.Number {} */

	&.String {
		color: #8da101;
	}

	&.Op,
	&.Assign {
		color: #f57d26;
	}

	&.Paren,
	&.Bracket,
	&.Comma,
	&.Dot,
	&.Ctor,
	&.Colon {
		color: light-dark(#5c6a72, #999999);
	}
}