h1 A decades old joke
form
  fieldset.chkgroup(role="radiogroup", aria-labelledby="question")
    legend#question So how much for gas!!!!
    input#c1(type="radio", name="chk")
    label(for="c1") An Arm
    input#c2(type="radio", name="chk")
    label(for="c2") A Leg
    input#c3(type="radio", name="chk")
    label(for="c3") Your First Born

@use 'sass:color';
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;500;900&display=swap");
* {
  box-sizing: border-box;
}
$bg: #ecf0f3;
$fg: #1f2020;
:root {
  font-family: "Noto Sans", sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-content: center;
  place-items: center;
  background-color: #{$bg};

  font-weight: 100;
}
h1 {
  margin: 0;
  color: color.scale($fg, $saturation: 30%, $lightness: 60%);
}
fieldset {
  display: flex;
  flex-direction: column;
  border-radius: 1em;
  padding: 3em;
  color: color.scale(complement($fg), $saturation: 30%, $lightness: 60%);
  border: 0.1em solid #{$bg};
  box-shadow: -0.25em -0.2em 0.5em 0 transparentize(lighten($bg, 20%), 0.2) inset,
    0.25em 0.2em 0.5em 0 transparentize(darken($bg, 20%), 0.2) inset;
}
legend {
  //$bw: 0.1;
  translate: 0 100%;
  font-weight: 500;
  text-align: center;
  font-size: 1.5rem;
  //text-shadow: 0 #{$bw * -1}em 0 #{$bg}, #{$bw * -1}em #{$bw * -1}em 0 #{$bg}, #{$bw * -1}em 0 0 #{$bg}, 0 #{$bw * 1}em 0 #{$bg}, #{$bw * 1}em #{$bw * 1}em 0 #{$bg}, #{$bw * 1}em 0 0 #{$bg};
}
[type="radio"] {
  display: none;
}

label {
  position: relative;
  padding: 1em;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  font-weight: 500;
  transition: 0.4s ease;
  color: transparentize($fg, 0.5);
}
label:hover {
  color: inherit;
}
label:before {
  transition: 0.4s ease;
  content: "";
  border-radius: 100vmax;
  display: inline-grid;
  margin-right: 1em;
  width: 2em;
  height: 2em;
  box-shadow: -0.5em -0.25em 0.5em 0 lighten($bg, 20%),
    0.5em 0.25em 1.25em 0 darken($bg, 20%);
  background-color: lighten($bg, 1%);
  filter: blur(0.1em);
  cursor: pointer;
}

[type="radio"]:checked + label {
  color: #{$fg};
  text-indent: 0.5em;
}

[type="radio"]:checked + label:before {
  box-shadow: -0.5em -0.25em 0.5em 0 lighten($bg, 20%),
    0.5em 0.25em 1.25em 0 darken($bg, 20%),
    0.1em 0.1em 0 transparentize(darken($bg, 20%), 0.5) inset,
    0.2em 0.2em 0 transparentize(darken($bg, 10%), 0.5) inset,
    0.1em 0.1em 0 transparentize(lighten($bg, 40%), 0.5) inset,
    -0.2em -0.2em 0 transparentize(lighten($bg, 20%), 0.5) inset;
}