<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.