tweak checkbox styles for mobile toggle

sites/svelte-5-preview/src/lib/Checkbox.svelte

@@ -5,7 +5,7 @@
 <input type="checkbox" bind:checked />
 
 <style>
-	input[type='checkbox'] {
+	input {
 		/* display: block; */
 		position: relative;
 		height: 1em;
@@ -20,7 +20,7 @@
 		margin: 0 0.6em 0 0;
 	}
 
-	input[type='checkbox']::before {
+	input::before {
 		content: '';
 		position: absolute;
 		display: block;
@@ -35,11 +35,11 @@
 		box-sizing: content-box;
 	}
 
-	input[type='checkbox']:checked::before {
+	input:checked::before {
 		background: var(--sk-theme-1);
 	}
 
-	input[type='checkbox']::after {
+	input::after {
 		content: '';
 		position: absolute;
 		display: block;
@@ -57,7 +57,7 @@
 			left 0.2s ease-out;
 	}
 
-	input[type='checkbox']:checked::after {
+	input:checked::after {
 		left: calc(100% - 1em + 2px);
 	}
 </style>

sites/svelte-5-preview/src/lib/InputOutputToggle.svelte

@@ -1,26 +1,20 @@
 <script>
 	/** @type {{ checked: boolean }} */
 	let { checked = $bindable(false) } = $props();
-
-	import Checkbox from './Checkbox.svelte';
 </script>
 
 <label class="input-output-toggle">
 	<span class:active={!checked} style="text-align: right">input</span>
-	<span style="display:grid; place-items: center">
-		<Checkbox bind:checked />
-	</span>
+	<input type="checkbox" bind:checked />
 	<span class:active={checked}>output</span>
 </label>
 
 <style>
 	.input-output-toggle {
-		position: relative;
-		display: grid;
+		display: flex;
 		user-select: none;
 		flex: 0;
-		grid-template-columns: 1fr 40px 1fr;
-		grid-gap: 0.5em;
+		gap: 0.5em;
 		align-items: center;
 		justify-content: center;
 		width: 100%;
@@ -36,4 +30,61 @@
 	.active {
 		color: var(--sk-text-2);
 	}
+
+	input {
+		/* display: block; */
+		position: relative;
+		height: calc(1em + 4px);
+		width: calc(100% - 0.6em);
+		max-width: 2em;
+		padding: 0 2px;
+		top: -2px;
+		border-radius: 0.5em;
+		-webkit-appearance: none;
+		appearance: none;
+		outline: none;
+		border: transparent;
+		margin: 0 0.4em 0 0;
+	}
+
+	input::before {
+		content: '';
+		position: absolute;
+		display: block;
+		height: 100%;
+		width: 100%;
+		padding: 0 2px;
+		border-radius: 1em;
+		top: 0;
+		left: 0;
+		background: var(--sk-theme-2);
+		/* box-sizing: border-box; */
+		box-sizing: content-box;
+	}
+
+	input:checked::before {
+		background: var(--sk-theme-1);
+	}
+
+	input::after {
+		content: '';
+		position: absolute;
+		display: block;
+		height: 1em;
+		width: 1em;
+		top: 2px;
+		left: 2px;
+		border-radius: 1em;
+		background: white;
+		box-shadow:
+			0 0px 1px rgba(0, 0, 0, 0.4),
+			0 4px 2px rgba(0, 0, 0, 0.1);
+		transition:
+			background 0.2s ease-out,
+			left 0.2s ease-out;
+	}
+
+	input:checked::after {
+		left: calc(100% - 1em + 2px);
+	}
 </style>