%html
  %body
    -# I'm using tabindex and the :focus state to cheat the interactivity on mobile
    %div.container{:tabindex => "1"}
      %div.search-container{:tabindex => "1"}
        %input{:type => "text", :placeholder => "search"}
        %a.button
          %i.fa.fa-search

*
  box-sizing: border-box
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  font-family: "Cabin"

html
  height: 100%

body
  height: 100%
  background: #FDF6E3

.container
  display: block
  max-width: 900px
  margin: auto
  padding: 100px
  height: 100%
  outline: none

.search-container
  overflow: hidden
  float: right
  height: 4em
  width: 4em
  border-radius: 2em
  box-shadow: 0 0 5px #6A5D4F
  -moz-transition: all 0.35s
  -webkit-transition: all 0.35s
  &:hover, &:focus, &:focus-within
    width: 25em
    border-radius: 5px 2em 2em 5px
    outline: none
    .button
    input
      display: inline-block
      width: 19em
      padding: 10px

input
  -moz-appearance: none
  -webkit-appearance: none
  appearance: none
  float: left
  width: 0em
  height: 2em
  margin: 1em
  margin-right: -4.5em
  background: #fff
  color: #6A5D4F
  font-size: 1em
  font-weight: 600
  padding: 0px
  border: 0
  border-radius: 5px
  box-shadow: 0 1px 5px rgba(0,0,0,0.2) inset
  text-shadow: 0 1px 1px rgba(0,0,0,0.15)
  -moz-transition: all 0.25s
  -webkit-transition: all 0.25s
  &:focus
    outline: none
    box-shadow: 0 -1px 1px rgba(255,255,255,0.25), 0 1px 5px rgba(0,0,0,0.15)

.button
  display: flex
  align-items: center
  justify-content: center
  float: right
  width: 1.75em
  height: 1.75em
  margin: 0.125em
  background: #6A5D4F
  text-align: center
  font-size: 2em
  color: #FDF6E3
  border-radius: 50%
  box-shadow: 0 -1px 1px rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.25)
  text-shadow: 0 -2px 1px rgba(0,0,0,0.3)
  &:active
    border: 0 !important
    text-shadow: 0 0 0
  i
    font-size: 85%