@import "../css/colors"
@import "../css/vars"

$toggle-time=.1s

:local(.search)
  display: flex
  align-items: flex-start
  height: 80px
  transition: left $toggle-time ease

:local(.button)
  display: inline-block;
  // border: solid 1px $blue

:local(.button.open)
  visibility: hidden

:local(.input)
  overflow: hidden;
  position: absolute;
  right: 0
  transition: width $toggle-time ease

  input
    border: none
    background-color: $lightGray
    height: 80px
    padding-left: 60px

    &:focus
      border: none

  [class^="doka-icon-search"], [class*="doka-icon-search"]
    cursor: pointer
    position: absolute
    color: $textGray
    font-size: 45px
    top: 18px
    left 10px