<body>
<div class="box">
	<span class="icon" aria-hidden="true">⚠️</span>
	Lorem Ipsum
	<form>
		<label><input type="radio" checked name="s" value="0">--s: 0</label>
		<label><input type="radio" name="s" value="1">--s: 1</label>
	</form>
</div>
</body>
:root {
	--s: 0;
}

body {
	background-color: black;
	display: grid;
	place-items: center;
	min-height: 90vh;
	font-family: monospace;
	font-size: 1rem;
}

.box {
	position: relative;
	display: grid;
	grid-gap: 1rem;
	padding: 1rem 1rem 1rem calc(1rem + var(--s) * 4rem);
	border-radius: 0.3rem;
	color: hsl(0, calc(var(--s, 0) * 100%), 80%);
	background-color: hsl(0, calc(var(--s, 0) * 100%), 15%);
	border: calc(var(--s, 0) * 1px) solid hsl(0, calc(var(--s, 0) * 100%), 80%);
	transition: background-color 0.4s cubic-bezier(0.24, 1, 0.74, 1), padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

label {
	display: flex;
	align-items: center;
}

.icon {
	position: absolute;
	left: 1rem;
	top: 1rem;
	font-size: 3rem;
	opacity: calc(var(--s) * 100%);
	transform: scale(calc(var(--s) * 100%));
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
View Compiled 
const toggle = (e) => {
	document.documentElement.
style.setProperty('--s', e.target.value);
	
	const foo = getComputedStyle(document.documentElement).getPropertyValue('--s');
	console.log('foo', foo)
}

const inputs = document.querySelectorAll("input")
inputs.forEach(input => {
	input.addEventListener("click", toggle)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.