:root {
	color-scheme: light;

	--bg: light-dark(#fff, #1e1e2e);
	--fg: light-dark(#000, #cdd6f4);
	--surface: light-dark(#faeff9, #30303e);
	--accent: light-dark(#d3bae3, #89b4fa);
	--muted: light-dark(#9ca0b0, #6c7086);
}

* {
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
	background: var(--bg);
	color: var(--fg);
	margin: 0;
	padding: 1rem;
	height: 100vh;

	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

a {
	color: var(--fg);
}
a:hover {
	color: var(--accent);
}

header {
	display: flex;
	flex-direction: row;
}

.title {
	padding: 0 1rem;
	flex-grow: 1;
	font-weight: bold;
}

.icon {
	width: 1.5rem;
}

main {
	display: flex;
	flex-grow: 1;
	min-height: 0; /* required so height can be smaller than children height */
}

#editor {
	/* reset */
	border: none;
	font-size: 1rem;
	margin: 0;
	resize: none;

	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 50%;
	min-width: 0;
	padding: 1.5rem;
	white-space: nowrap;
	background-color: var(--surface);
	border-radius: 1.6em;
}

#editor:focus {
	outline: 1px solid var(--accent);
}

#resize {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 0.5rem;
	min-width: 0.5rem;
	cursor: col-resize;
}

.preview {
	position: relative;
	min-width: 0;
	width: 100%;
	height: 100%;
}

#out {
	position: relative;
	height: 100%;
	overflow: auto;
	z-index: 0;
}

#status {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1rem; /* render above the scrollbar */
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	color: var(--muted);
	font-size: 0.75rem;
	z-index: -1; /* so it renders under #out */
}

.controls {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 0.5rem;
	z-index: 1; /* so it renders on top of #out */
}

.controls button {
	border: none;
	padding: 0.5rem;
	background-color: var(--surface);
	color: var(--fg);
	border-radius: 50%;
	cursor: pointer;
}

.controls button svg {
	width: 1rem;
	height: 1rem;
	display: block;
}

.controls button:hover {
	outline: 1px solid color-mix(in srgb, var(--accent) 30%, var(--surface));
}

.controls button:focus {
	outline: 1px solid var(--accent);
}

.controls button.success {
	outline: 1px solid color-mix(in srgb, var(--accent) 30%, #79ae75);
}
.controls button.error {
	outline: 1px solid color-mix(in srgb, var(--accent) 30%, #ef7373);
}

#loading {
	position: absolute;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	backdrop-filter: blur(4px);
}

.loading-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--muted);
	animation: loading-bounce 1s ease-in-out infinite;
}
.loading-dot:nth-child(1) {
	animation-delay: 0s;
}
.loading-dot:nth-child(2) {
	animation-delay: 0.15s;
}
.loading-dot:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes loading-bounce {
	0%,
	80%,
	100% {
		transform: scale(0.8);
	}
	40% {
		transform: scale(1);
	}
}