style: Restyle 'Show direction' checkbox to match menu buttons

mapper/src/App.css

@@ -97,6 +97,60 @@ h2 {
 	background-color: #666;
 }
 
+.submenu-checkbox-label {
+	/* Make it look like a button */
+	background-color: #666;
+	height: 2.5rem;
+	font-size: 1.5rem;
+	color: white;
+	cursor: pointer;
+
+	/* Center content */
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+}
+
+.submenu-checkbox-label:hover {
+	background-color: #999;
+}
+
+.submenu-checkbox-label input[type="checkbox"] {
+	/* Reset default styles */
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	background-color: transparent;
+	margin: 0;
+
+	/* Custom checkbox style */
+	font: inherit;
+	color: currentColor;
+	width: 1.15em;
+	height: 1.15em;
+	border: 0.1em solid currentColor;
+	border-radius: 0;
+	transform: translateY(-0.075em);
+
+	/* For the checkmark */
+	display: grid;
+	place-content: center;
+}
+
+.submenu-checkbox-label input[type="checkbox"]::before {
+	content: "";
+	width: 0.75em;
+	height: 0.75em;
+	transform: scale(0);
+	transition: 120ms transform ease-in-out;
+	background-color: white;
+}
+
+.submenu-checkbox-label input[type="checkbox"]:checked::before {
+	transform: scale(1);
+}
+
 .datepicker .rdtPicker {
 	background: none;
 	border: none;