touch friendly radio button group

[alphatownsman]

sth like

[dev-willis]

I do that like this:

Markup:

<div class="radio_group">
	<input type="radio" id="rg-one" name="radio_name">
	<label for="rg-one">One</label>
	<input type="radio" id="rg-two" name="radio_name">
	<label for="rg-two">Two</label>
	<input type="radio" id="rg-three" name="radio_name">
	<label for="rg-three">Three</label>
	<input type="radio" id="rg-four" name="radio_name">
	<label for="rg-four">Four</label>
</div>

CSS:

.radio_group{display:flex; justify-content:center;
	input{display:none;}
	label{border:var(--pico-primary) solid var(--pico-border-width); margin:0; padding:1em; display:grid; place-content:center;
		&:first-of-type{border-radius:var(--pico-border-radius) 0 0 var(--pico-border-radius);}
		&:last-of-type{border-radius:0 var(--pico-border-radius) var(--pico-border-radius) 0;}
		&:not(:last-of-type){border-right:0; margin:0;}
		&:hover{background-color:var(--pico-primary); color:#fff;}
	}
	input:checked + label{background-color:var(--pico-primary); color:#fff;}
}