.wrapper
  .input-group
    input.search(type="text" placeholder="Searching for something?")
    span.bar
    

// Variables
$black: #000
$white: #fff
$blue: #26547c
$green: #06d6a0
$light-gray: #a1a1a1

// Mixins
=size($h, $w)
  height: $h
  width: $w

=flex-center
  display: flex
  align-items: center
  justify-content: center

=gradient($deg, $fc, $sc)
  background: linear-gradient($deg, $fc 0%, $sc 100%)

// Style
.wrapper
  +gradient(45deg, $blue, $green)
  +size(100vh, 100vw)
  +flex-center
  overflow: hidden

  .disclaimer
    bottom: 15px
    position: absolute

.input-group
  position: relative

  .search
    +size(15px, 15px)
    background-color: $white
    border: 0
    border-radius: 50%
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.15)
    cursor: pointer
    color: $white
    outline: none
    padding: 5px
    position: relative
    transition: all 150ms cubic-bezier(0.2, 0.6, 0.252, 1.2)

    ~ .bar
      +size(4px, 15px)
      background: $white
      border-radius: 4px
      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.15)
      position: absolute
      display: block
      opacity: 1
      right: -9px
      top: 24px
      transform: rotate(45deg)
      transition: opacity 150ms ease
    
    &::placeholder
      color: $white
  
    &:focus
      +size(25px, 200px)
      border-radius: 3px
      color: $blue
      cursor: initial
  
      &::placeholder
        color: $light-gray
  
      ~ .bar
        box-shadow: none
        opacity: 0
        right: 0
        top: 5px