- var icons = ['bookmark_border', 'list', 'settings', 'room']

.container
  p Just for fun!
  .bottombar
    - for(var i = 0; i < 4; i++)
      input(type='radio' name='tap' id=`t${i}` checked=(i == 0) ? true : false)
      label(for=`t${i}` class='round')
        i(class='material-icons')= icons[i]

    .div(id='back')

@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

$wd: 45px;
$n: 4;
$color: #66ccff;

*{ margin: 0; }

html, body{
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container{
  position: relative;
  width: 280px;
  height: 550px;
  background: $color;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 8px 50px -15px rgba(0,0,0,0.15), 0 0px 5px -1px rgba(0,0,0,0.10);
  border: 5px solid #fff;
  p{
    font-family: 'Montserrat', sans-serif;
    display: block;
    line-height: 550px;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 30px;
  }
  
  .bottombar{
    display: flex;
    position: absolute;
    width: 100%;
    height: 55px;
    bottom: 0;
    justify-content: space-around;
    align-items: center;
    
    input{
      display: none;
    }

    .round{
      position: relative;
      width: $wd;
      height: $wd;
      background: white;
      border-radius: 50%;
      transform: translate(0, 5px);
      transition: transform 0.3s ease;
      will-change: transform;
      cursor: pointer;
      z-index: 1;
      text-align: center;
      i{
        color: #aaa;
        line-height: $wd;
      }
    }
    
    #back{
      width: 100%;
      position: absolute;
      background: white;
      height: 45px;
      bottom: 0;
      z-index: 0;
      &::after{
        content: '';
        display: block;
        width: 60px;
        height: 60px;
        background:  $color;
        border-radius: 50%;
        margin-top: -20px;
        transform: translate(5px, 0);
        will-change: transform;
        transition: transform 0.2s ease;
      }
    }
    
    @for $l from 0 through $n {
      #t#{$l}:checked{
        & + .round{
          transform: translate(0, -7px);
          box-shadow: 0 10px 20px -5px rgba(0,0,0,0.3);
          i{
            color: $color;
          }
        }
        
        & ~ #back::after{
          transform: translate(#{(70*$l+5)}px, 0);
        }
      }
    }
  }
}