.container
  input.main
  span(class="searchicon")
  .microphone
    .mic-stand
  .icon-holder
    .icon#parking
      .tooltip Parking
    .icon#gas
      .base
      .tooltip Gas
    .icon#eat
      .fork
      .knife
      .tooltip Food
    .icon#coffee
      .cup
      .tooltip Coffee
    .icon#misc
      .dots
      .tooltip Misc

$background: #93C4D3
$primaryone: #B1BEC6
$primarytwo: #5F8FA4
$primarythree: #FF5252
$primaryfour: #43b3e7

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

@mixin icons($height, $width)
  position: absolute
  height: $height + px
  width: $width + px

body
  margin: 0
  padding: 0
  background: $background
  height: 100vh
  width: 100vw
  display: flex
  justify-content: center
  align-items: center
  font-family: 'Raleway', sans-serif

.container
  position: relative
  
.main
  position: relative
  border: 2px solid $primarytwo
  height: 25px
  background: $primaryone
  width: 190px
  border-radius: 50px
  padding-left: 31px
  padding-right: 11px
  padding-top: 4px
  padding-bottom: 4px
  font-size: 13px
  color: #555
  &:focus
    outline: none
  
.searchicon
  position: absolute
  height: 12px
  width: 12px
  background: transparent
  border: 3px solid $primarytwo
  left: 10px
  top: 8px
  border-radius: 100%
  &:after
    content: ''
    position: absolute
    background: $primarytwo
    height: 6px
    width: 3px
    bottom: -5px
    right: -3px
    transform: rotate(-45deg)
  
.microphone
  position: absolute
  height: 24px
  width: 24px
  background: $primarythree
  right: 12px
  top: 6px
  border-radius: 100%
  box-shadow: 0px 1px 2px 0px #555
  &:after
    content: ''
    position: absolute
    background: darken($primarythree, 27%)
    height: 12px
    width: 8px
    border-radius: 10px
    left: 8px
    top: 3px
  &:before
    content: ''
    position: absolute
    border-bottom: 2px solid darken($primarythree, 27%)
    height: 10px
    width: 10px
    border-radius: 100%
    top: 6px
    left: 7px

.mic-stand
  position: absolute
  height: 4px
  width: 2px
  background: darken($primarythree, 27%)
  bottom: 3px
  left: 11px
  
.icon-holder
  display: flex
  justify-content: space-around
  margin-top: 7px
  
.icon
  position: relative
  height: 35px
  width: 35px
  background: $primaryfour
  border-radius: 100%
  box-shadow: 0px 1px 2px 0px #555
  cursor: pointer
  opacity: 0
  transition: .4s
  &:hover
    background: lighten($primaryfour, 10%)
    animation-play-state: paused
  
#parking:after
  content: 'P'
  font-weight: bold 
  position: absolute
  font-size: 13px
  color: $primaryfour
  background: white
  padding: 1px 3px 1px 4px
  border-radius: 100%
  left: 10px
  top: 9px
  
#gas:after
  content: ''
  +icons(15, 12)
  background: white
  border-top-right-radius: 4px
  border-top-left-radius: 4px
  top: 9px
  left: 11px
  
#gas:before
  content: ''
  +icons(6, 8)
  background: $primaryfour
  left: 13px
  top: 11px
  z-index: 1
  
.base
  position: absolute
  background: white
  width: 16px
  height: 4px
  top: 23px
  left: 9px
  border-radius: 2px
  &:after
    content: ''
    +icons(10, 10)
    border-radius: 100%
    border-left: 2px solid white
    bottom: 4px
    left: -1px

#eat:after
  content: ''
  +icons(13, 4)
  background: white
  border-radius: 3px
  top: 15px
  left: 11px

#eat:before
  content: ''
  +icons(5, 8)
  border-bottom-left-radius: 100%
  border-bottom-right-radius: 100%
  background: white
  top: 12px
  left: 9px
  
.fork
  +icons(5, 2)
  background: white
  top: 7px
  left: 9px
  &:after
    content: ''
    +icons(5, 2)
    background: white
    top: 0px
    left: 3px
  &:before
    content: ''
    +icons(5, 2)
    background: white
    top: 0px
    left: 6px
  
.knife
  +icons(9, 4)
  background: white
  right: 11px
  bottom: 7px
  border-radius: 2px
  &:after
    content: ''
    +icons(13, 6)
    background: white
    bottom: 8px
    border-top-right-radius: 100%
  
.cup
  +icons(14, 17)
  background: white
  top: 15px
  left: 8px
  border-bottom-left-radius: 100%
  border-bottom-right-radius: 100%
  &:after
    content: ''
    +icons(10, 15)
    border-radius: 100%
    right: -4px
    border-right: 2px solid white
  
#coffee:after
  content: 'S'
  position: absolute
  font-style: italic
  font-size: 5px
  transform: skewY(-40deg)
  color: white
  top: 6px
  left: 12px
  
#coffee:before
  content: 'S'
  position: absolute
  font-style: italic
  font-size: 5px
  transform: skewY(-40deg)
  color: white
  top: 6px
  left: 18px
  
.dots
  +icons(5, 5)
  background: white
  border-radius: 100%
  left: 15px
  top: 15px
  &:after
    content: ''
    +icons(5, 5)
    background: white
    border-radius: 100%
    left: 9px
  &:before
    content: ''
    +icons(5, 5)
    background: white
    border-radius: 100%
    left: -9px
  
input:focus ~ .icon-holder > .icon
  animation: ani 2.2s ease-out infinite
  @keyframes ani
    0%
      opacity: 1
    10%
      transform: scale(1.2)
      opacity: 1
    20%
      transform: scale(1)
      opacity: 1
    100%
      transform: scale(1)
      opacity: 1
    
    
#gas
  animation-delay: .1s
    
#eat
  animation-delay: .2s
  
#coffee
  animation-delay: .3s
  
#misc
  animation-delay: .4s
    
.tooltip
  opacity: 0
  position: absolute
  font-size: 12px
  color: white
  background: #555
  padding: 8px
  top: 15px
  border-radius: 15%
  top: 45px
  &:after
    content: ''
    position: absolute
    background: #555
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
    height: 18px
    width: 18px
    top: -10px
    left: 7px
  
.icon:hover > .tooltip
  animation: ani .4s ease-out forwards
  animation-delay: .3s
    
// .icon-holder:hover > .icon
//   animation-play-state: paused !important