- for i in 0..5
  input[type="radio" id="li#{i}" name="foo" checked=i===1]
  label[for="li#{i}"]

$n: 4
$t: 0.33s
$height: 36px
$width: 108px
$margin: 14px

// derived
$fullheight: $n * $height + ($n + 1) * $margin
$fullwidth: $width + $margin + $fullheight

html
  background: #ff6461

body
  position: absolute
  left: 50%
  top: 50%
  height: $fullheight
  width: $fullwidth
  margin: $fullheight/-2 $fullwidth/-2

input
  visibility: hidden

label
  position: absolute
  left: 0
  right: $fullwidth - $width
  background: white
  cursor: pointer

  @for $i from 0 to $n
    #li#{$i} + &
      $top: $i * $height + ($i + 1) * $margin
      top: $top
      bottom: $fullheight - $top - $height
  
  \:checked + &
    left: $width + $margin
    right: 0
    top: $margin !important
    bottom: $margin !important
    transition: left $t $t, right $t $t, top $t $t*2, bottom $t $t*2
  
  transition: left $t $t, right $t $t, top $t, bottom $t
      

// nojs