.ppe-playground {
	background-color: #1d1f25;
	display: flex;
	width: 100%;

	:is(body):has(&) {
		background-color: #1d1f25;
	}

	.editors-container {
		display: grid;
		width: 100%;
		grid-template-rows: max-content minmax(0, 1fr);
		grid-template-columns: 100%;
		gap: var(--space-20);

		@media (--from-wide) {
			height: calc(100vh - var(--heading-size-from-medium));
		}
	}

	.editors {
		display: grid;
		gap: var(--space-20);
		grid-template-areas:
			"input"
			"output"
			"config";
		grid-template-columns: 100%;
		width: 100%;

		@media (--from-wide) {
			grid-template-areas:
				"input output"
				"config output";
			grid-template-rows: minmax(0, 65%) minmax(0, 35%);
			grid-template-columns: calc(50% - var(--space-10)) calc(50% - var(--space-10));
			height: 100%;
		}

		@media (width >=1440px) {
			grid-template-rows: minmax(0, 65%) minmax(0, 35%);
		}
	}

	#controls {
		background-color: #282c34;
		color: white;
		padding-inline: var(--space-10);

		@media (--from-medium) {
			padding-inline: var(--space-20);
		}

		@media (--from-wide) {
			padding-inline: var(--space-25);
		}
	}

	#controls fieldset {
		border: none;
		display: inline-block;
		margin: 7px 0;
		outline: none;
		padding: 0;
	}

	#controls fieldset:not(:last-child) {
		margin-right: var(--space-40);

		@media (--from-wide) {
			margin-right: var(--space-40);
		}
	}

	#controls input[type="number"] {
		width: 50px;

		@media (--from-wide) {
			width: 50px;
		}
	}

	#browsers {
		width: 250px;

		@media (--from-wide) {
			width: 240px;
		}
	}

	#input-editor {
		grid-area: input;
	}

	#config-editor {
		grid-area: config;
	}

	#output-editor {
		grid-area: output;
	}

	.cm-editor {
		height: 100%;

		@media (--from-wide) {
			height: 100%;
		}
	}
}
