.navbar
  background-color: get-color(air)
  box-shadow: 0 1px 2px 0 get-color((color: dark, opacity: .1))
  display: inline-block
  position: fixed
  top: 0
  width: 100%
  z-index: $navbar-z

  &__container
    position: relative

  &__content
    +grid-column(12)
    align-items: center
    display: flex
    height: 50px
    position: relative

  &__logo
    display: flex

    img
      height: 24px

  &__nav
    display: flex
    border-top: 1px solid get-color((color: rock, opacity: .15))
    width: 100%

  &__search
    overflow: hidden

  &__menu
    position: absolute
    right: 0

    .button
      background-color: get-color(air)
      border: 0
      display: flex
      height: auto
      padding: 0

      span
        display: none

      path
        fill: get-color(gafieira)

  +grid-media($breakpoint-normal)
    &__content
      height: 80px

    &__logo
      img
        height: 40px

    &__nav
      border-top: 0
      left: calc(164px + 60px)
      position: absolute
      width: auto

    &__menu
      .button
        background-color: get-color(gafieira)
        border: 1px solid get-color(gafieira)
        padding: 12px

        span
          display: inline-block

        svg, img
          height: 16px
          margin-right: 12px
          width: 16px

        path
          fill: get-color(air)

        &:hover
          background-color: get-color(gafieira, darker)
          border: 1px solid get-color(gafieira, darker)
          color: get-color(air)