.dev-tools {
	--font-sans:
		ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
		"Segoe UI Symbol", "Noto Color Emoji";
	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	--font-mono:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		"Courier New", monospace;

	--rgb-blurple: 101, 114, 245;
	--c-blurple: rgb(var(--rgb-blurple));

	--rgb-fuchsia: 238, 69, 158;
	--c-fuchsia: rgb(var(--rgb-fuchsia));

	--rgb-green: 35, 165, 89;
	--c-green: rgb(var(--rgb-green));

	--rgb-yellow: 240, 178, 50;
	--c-yellow: rgb(var(--rgb-yellow));

	--rgb-orange: 255, 144, 0;
	--c-orange: rgb(var(--rgb-orange));

	--rgb-red: 218, 55, 60;
	--c-red: rgb(var(--rgb-red));

	--rgb-cyan: 95, 205, 228;
	--c-cyan: rgb(var(--rgb-cyan));

	--rgb-pink: 246, 42, 245;
	--c-pink: rgb(var(--rgb-pink));

	--rgb-gray: 117, 126, 138;
	--c-gray: rgb(var(--rgb-gray));

	--rgb-white: 255, 255, 255;
	--c-white: rgb(var(--rgb-white));

	--rgb-black: 30, 31, 34;
	--c-black: rgb(var(--rgb-black));

	--c-primary: var(--c-blurple);
	--c-secondary: var(--c-fuchsia);
	--c-alert: var(--c-orange);
	--c-error: var(--c-red);

	--c-bg-0: rgb(30, 31, 34);
	--c-bg-1: rgb(43, 45, 49);
	--c-bg-2: rgb(49, 51, 56);
	--c-bg-3: rgb(64, 66, 73);

	--c-fg-0: rgb(255 255 225);
	--c-fg-1: rgb(219 222 225);
	--c-fg-2: rgb(181 186 193);
	--c-fg-3: rgb(113 116 120);

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 16px;
	--sp-4: 24px;
	--sp-5: 32px;
	--sp-6: 48px;

	height: 100%;
	min-width: 1px;
	max-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	order: -1;
	font-size: medium;
	font-family: var(--font-sans);

	*,
	*::after,
	*::before {
		box-sizing: border-box;
	}

	*:focus {
		outline-width: 2px;
		outline-style: solid;
		outline-color: var(--c-primary);
	}
}

.tool-bar {
	overflow: hidden;
	border-right: 1px solid var(--c-fg-3);
	background: var(--c-bg-0);
	color: var(--c-fg-1);
	width: 100%;
	height: 100%;
	padding: var(--sp-2);
	display: flex;
	flex-flow: column nowrap;
	gap: var(--sp-2);
}

.tool-bar-resize {
	position: absolute;
	top: 0;
	right: -3px;
	width: 5px;
	height: 100%;
	cursor: ew-resize;
	user-select: none;
}

.zoom-bar {
	display: flex;
	gap: var(--sp-2);

	button {
		color: inherit;
		border-radius: var(--sp-1);
		border: none;
		background: transparent;
		padding: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	button:hover {
		background: var(--c-bg-3);
	}
}

.scene-props {
	display: flex;
	gap: var(--sp-2);
	flex-flow: row wrap;

	& > :not(:first-child) {
		width: calc(50% - var(--sp-1));
		flex-basis: calc(50% - var(--sp-1));
	}
}