.cont
  %input#r1(type="radio" name="radio")
  %label(for="r1")
  %input#r2(type="radio" name="radio")
  %label(for="r2")
  %input#r3(type="radio" name="radio" checked="true")
  %label(for="r3")
  .slider
    .line1
    .line2
    .dot2
    .dot

.cont
  %input#r4(type="radio" name="radio2")
  %label(for="r4")
  %input#r5(type="radio" name="radio2")
  %label(for="r5")
  %input#r6(type="radio" name="radio2" checked="true")
  %label(for="r6")
  .slider
    .line1
    .line2
    .dot2
    .dot
    

$c1: #111
$c2: #f00
$dim: 20px
$t: 0.3s

*, *:after, *:before
  box-sizing: border-box

body
  margin: 0
  height: 100vh
  display: flex
  align-items: center
  justify-content: center
  overflow: hidden

input[type="radio"]
  display: none

.cont
  width: $dim*6
  position: absolute
  margin-left: -$dim*3
  label:before
    cursor: pointer
    content: ''
    display: block
    height: $dim
    width: $dim
    border: 2px solid $c1
    border-radius: 50%
    float: left
    margin: 0 $dim/2
  .slider > .dot
    height: $dim/2
    width: $dim/2
    border-radius: 50%
    position: relative
    top: $dim/2 - $dim/4
    left: $dim*0.75
    opacity: 0
    background-color: $c1
    transition: all $t
  input[type="radio"]:checked ~ .slider > .dot
    opacity: 1
  .line1
    height: $dim*3
    width: 2px
    background-color: $c1
    position: absolute
    transform-origin: bottom
    transform: translateX($dim*3 - 1) translateY($dim)
    transition: all $t
  .line2
    position: absolute
    height: 50vh
    width: 2px
    background-color: $c1
    transform: translateX($dim*3-1) translateY($dim*4)
  .dot2
    position: absolute
    height: $dim/3
    width: $dim/3
    background-color: $c1
    border-radius: 50%
    transform: translateX($dim*3-$dim/6) translateY($dim*4-$dim/6)
    
  #r1:checked, #r4:checked  
    ~ .slider > .dot
      transform: translateX(0)
    ~ .slider > .line1
      transform: translateX($dim*3 - 1) translateY($dim) rotate(-30deg) scaleY(1.2)
  #r2:checked, #r5:checked  
    ~ .slider > .dot
      transform: translateX($dim*2)
    ~ .slider > .line1
      transform: translateX($dim*3 - 1) translateY($dim)
  #r3:checked, #r6:checked 
    ~ .slider > .dot
      transform: translateX($dim*4)
    ~ .slider > .line1
      transform: translateX($dim*3 - 1) translateY($dim) rotate(30deg) scaleY(1.2)
  
.cont:nth-of-type(2)
  transform: scaleY(-1) translateY($dim*3)
  
.zapp, .zapp:after, .zapp:before
  content: ''
  position: absolute
  height: $dim*2
  width: 4px
  margin-left: -2px
  background-color: $c2
.zapp
  transform: translateY(-$dim*2)
  &:after
    transform: translateX($dim*2+2)
  &:before
    transform: translateX(-$dim*2+2)

//LOGIC
#c1:checked ~ #c4:checked ~ .zapp
  display: none