.searchbar
  align-items: center
  background-color: get-color(air)
  display: flex
  height: 50px
  position: absolute
  right: 30px
  transition: width .2s ease-in-out
  width: 18px
  z-index: $searchbar-z

  &__icon
    margin-right: 10px

  &__button
    display: none
    visibility: hidden

  &__form
    width: 100%

  &__input,
  &__close
    opacity: 0
    transition: opacity .2s ease-in-out
    visibility: hidden

  &__input
    width: calc(100% - 28px)

    &:focus, &:hover
      border: 0
      outline: none

  &__close
    position: absolute
    right: 0

    &:hover
      cursor: pointer
      opacity: .7

  &--active
    right: 0
    top: 0
    width: 100%

    .searchbar__input,
    .searchbar__close
      opacity: 1
      visibility: visible

    .searchbar__close
      &:hover
        opacity: .7

  +grid-media($breakpoint-normal)
    border: 1px solid get-color(rock, lighter)
    border-radius: 4px
    height: 42px
    overflow: hidden
    padding: 0
    right: 140px
    top: 19px
    width: 110px

    &:hover
      background-color: get-color(air, darker)
      cursor: pointer

    &__icon
      margin-left: 12px

    &__button
      color: get-color(gafieira)
      display: flex
      font-size: 14px
      text-transform: uppercase
      visibility: visible

    &__close
      right: 12px

    &--active
      width: calc(100% - 345px)

      &:hover
        background-color: get-color(air)
        cursor: default

      .searchbar__button
        display: none
        visibility: hidden

      .searchbar__input
        opacity: 1
        visibility: visible