svelte/site/src/components/Repl/InputOutputToggle.svelte

<style>
	.input-output-toggle {
		display: grid;
		position: absolute;
		user-select: none;
		grid-template-columns: 1fr 40px 1fr;
		grid-gap: 0.5em;
		align-items: center;
		width: 100%;
		height: 4.2rem;
		border-top: 1px solid var(--second);
	}

	input {
		display: block;
	}

	span {
		color: #ccc;
	}

	.active {
		color: #555;
	}
</style>

<label class="input-output-toggle">
	<span class:active={!checked} style="text-align: right">input</span>
	<input type="checkbox" bind:checked>
	<span class:active={checked}>output</span>
</label>