<style>
	#weatherController {
		color: var(--text-color);
		font-size: var(--step--2);
		font-variation-settings: var(--font-variation-ui);
		text-transform: uppercase;
		letter-spacing: var(--ui-letter-spacing);
		font-family: var(--font-family-ui);
		& label {
			display: inline;
		}
		& input {
			accent-color: var(--contrast-color);
			background-color: var(--background-color);
			border: var(--border-details);
			border-color: var(--contrast-color);
			border-radius: var(--border-radius);
			color: var(--text-color);
			&:focus {
				box-shadow: 0 0 0 2px var(--contrast-color);
				outline: none;
			}
		}
	}
</style>

<form id="weatherController">
	<input type="checkbox" id="weatherToggle" checked />
	<label for="weatherToggle">Show weather?</label>
</form>
