@layer reset, base, splitpanel, textarea;


@layer base {
	:root {
		--base-clr: oklch(from blue 50% 30% h);
		--base-clr-dark: oklch(from var(--base-clr) calc(l - 0.1) c h);
		--base-clr-darkest: oklch(from var(--base-clr-dark) calc(l - 0.07) c h);
		--error-clr: oklch(from red 55% 50% h);
		--warning-clr: oklch(from orange calc(l - 0.1) c h);
		--text-clr: oklch(from white calc(l - 0.05) c h);

		--window-margin: 1rem;
	}

	body {
		background-color: var(--base-clr);
		color: var(--text-clr);
	}

	h1 {
		font-size: 2rem;
		margin-inline: var(--window-margin);
		margin-block-start: var(--window-margin);
	}
	h2 {
		font-size: 1.25rem;
	}

	.container {
		height: 100svh;

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

	canvas {
		width: 100%;
		height: 100%;
	}

	.errors {
		background-color: var(--base-clr-darkest);
		height: 100%;
		padding: 1rem;
		
		li {
			background-color: var(--error-clr);
			padding-inline: 0.5rem;
			padding-block: 0.25rem;
		}

		ul {
			list-style: none;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
		}
	}

	.no-js-banner {
		background-color: oklch(from orange calc(l + 0.1) c h);
		
		font-size: 1.2rem;
		text-align: center;
		font-weight: bold;
		color: var(--base-clr-dark);
		text-wrap: balance;
		
		padding-inline: 1rem;
		padding-block: 1rem;
		margin-inline: var(--window-margin);

		border-radius: 100vw;
	}

	.tag-name-highlight {
		color: orange;
	}

	.string-highlight {
		color: lightgreen;
	}
	
	.error-highlight {
		text-decoration: underline wavy var(--error-clr);
	}

	.warning-highlight {
		text-decoration: underline wavy var(--warning-clr);
	}

	.error-hint, .warning-hint {
		padding-inline: 0.5rem;
		padding-block: 0.25rem;
		border-radius: 0.125rem;
	}
	.error-hint {
		background-color: var(--error-clr);
	}
	.warning-hint {
		background-color: var(--warning-clr);
	}
}

@layer splitpanel {
	.splitpanel {
		flex: 1;
		min-height: 0;
		
		overflow-y: auto;
		overflow-x: clip;

		background-color: var(--base-clr-dark);
		border-top: 2px solid var(--base-clr-darkest);

		display: grid;
		grid-template-rows: 1fr auto;
		grid-template-columns: var(--grid-template-columns, 1fr auto 1fr);

		.panel {
			overflow: hidden;
			grid-row-start: 1;
		}

		.switch {
			display: none;
			
			background-color: var(--base-clr-darkest);
			border-top: 2px solid var(--base-clr-dark);

			padding-inline: 1.5rem;
			padding-block: 0.75rem;

			gap: 0.5rem;
			justify-content: center;
			align-items: center;

			[aria-current="false"] {
				color: rgba(from currentColor r g b / 0.6);
			}
		}

		.checkbox {
			appearance: none;
			background-color: var(--base-clr);
			position: relative;

			--width: 3rem;
			--height: 1.75rem;
			--padding: 0.25rem;

			width: var(--width);
			height: var(--height);

			border-radius: 100vw;

			&::before {
				content: "";
				background-color: var(--base-clr-darkest);
				
				--size: calc(var(--height) - 2 * var(--padding));
				width: var(--size);
				height: var(--size);
				
				border-radius: 100vw;

				position: absolute;
				top: var(--padding);
				left: var(--padding);

				transition: translate 200ms ease;
			}

			&:checked::before {
				translate: calc(var(--width) - var(--size) - var(--padding) * 2) 0;
			}
		}

		.divider {
			position: relative;
			background-color: var(--base-clr);

			cursor: w-resize;
			width: 2px;
			
			grid-row-start: 1;

			&::before {
				content: "";

				position: absolute;
				inset: 0;
				left: -5px;
				right: -5px;
			}
		}

		@media (width < 500px) {
			& {
				grid-template-columns: 1fr;
			}

			.panel {
				grid-column-start: 1;
				transition: translate 200ms ease;
			}

			.switch {
				display: flex;
			}

			.divider {
				display: none;
			}

			.right {
				translate: 100% 0;
			}

			&:has(.checkbox:checked) {
				.left {
					translate: -100% 0;
				}
				.right {
					translate: 0 0;
				}
			}
		}

	}
}

@layer textarea {
	.textarea {
		background-color: var(--base-clr-darkest);
		position: relative;
		user-select: text;
		overflow-y: auto;
		height: 100%;
		display: grid;
		grid-template-columns: auto 1fr;
		font-family: monospace;

		.line-numbers {
			background-color: var(--base-clr-dark);
			padding-inline: 0.5rem;
			padding-block: 0.25rem;

			& > div {
				text-align: end;
			}
		}
		
		.textbox {
			padding-inline: 0.5rem;
			padding-block: 0.25rem;
			white-space: pre;
			overflow-y: auto;
			outline: none;
			caret-color: transparent;
		}

		.hovers {
			position: absolute;

			& > [popover] {
				position: absolute;
				top: calc(anchor(bottom) + 2px);
				left: anchor(left);
			}
		}

		.cursor {
			position: absolute;
			border-left: 1px currentColor solid;
			height: 1rem;
			width: 0;
			pointer-events: none;
			animation-name: cursor-blink;
			animation-duration: 1.6s;
			animation-timing-function: steps(1);
			animation-iteration-count: infinite;
		}
	}

	@keyframes cursor-blink {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 0;
		}
	}
}

@layer reset {
	/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
	*,
	::before,
	::after {
		box-sizing: border-box;
	}

	html {
		font-family:
			system-ui,
			'Segoe UI',
			Roboto,
			Helvetica,
			Arial,
			sans-serif,
			'Apple Color Emoji',
			'Segoe UI Emoji';
		line-height: 1.15;
		-webkit-text-size-adjust: 100%;
		tab-size: 4;
	}

	body {
		margin: 0;
	}

	b,
	strong {
		font-weight: bolder;
	}

	code,
	kbd,
	samp,
	pre {
		font-family:
			ui-monospace,
			SFMono-Regular,
			Consolas,
			'Liberation Mono',
			Menlo,
			monospace;
		font-size: 1em;
	}

	small {
		font-size: 80%;
	}

	sub,
	sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

	sub {
		bottom: -0.25em;
	}

	sup {
		top: -0.5em;
	}

	table {
		border-color: currentcolor;
	}

	button,
	input,
	optgroup,
	select,
	textarea {
		font-family: inherit;
		font-size: 100%;
		line-height: 1.15;
		margin: 0;
	}

	button,
	[type='button'],
	[type='reset'],
	[type='submit'] {
		-webkit-appearance: button;
		appearance: button;
	}

	legend {
		padding: 0;
	}

	progress {
		vertical-align: baseline;
	}

	::-webkit-inner-spin-button,
	::-webkit-outer-spin-button {
		height: auto;
	}

	[type='search'] {
		-webkit-appearance: textfield;
		appearance: textfield;
		outline-offset: -2px;
	}

	::-webkit-search-decoration {
		-webkit-appearance: none;
	}

	::-webkit-file-upload-button {
		-webkit-appearance: button;
		font: inherit;
	}

	summary {
		display: list-item;
	}

	/* not part of the above mentioned reset */
	[popover] {
		inset: unset;
		border: none;
		background-color: unset;
		padding: 0;
		color: inherit;
	}

	h1, h2, h3, h4, h5, h6 {
		font-size: 1rem;
		margin: 0;
	}
	
}