.navbar
  .navbar-brand
    .title-logo
      margin-left: -1rem
      .title
        color: #fff
        padding-bottom: 3px
        span
          margin-left: .5rem
        span, img
          vertical-align: middle
      span
        &:first-child
          margin-right: 8px
          opacity: .85
  .navbar-menu
    .current-user
      span
        margin-right: .8em
        font-size: .9em
      img
        max-height: 32px
    .navbar-end
      .navbar-item:last-child
        margin-right: -1rem

@media screen and (max-width: $mobile - 1)
  .navbar
    .navbar-brand
      .title-logo
        margin-left: 0

@media screen and (max-width: $desktop - 1)
  .navbar
    .button.is-primary.login-button
      width: 100%
      background-color: $primary
      border-color: transparent
      color: #fff
    .navbar-menu
      &.is-active
        position: absolute
        z-index: 30
        width: 100%
      .navbar-end
        text-align: center
        margin-bottom: .5em
        .current-user
          display: flex
          flex-direction: row-reverse
          align-items: center
          justify-content: center
          span
            margin-left: .8em
        .navbar-item:last-child
          margin-right: 0

@media screen and (min-width: $desktop)
  .navbar
    .container
      .navbar-brand
        margin-left: 0
      .navbar-menu
        margin-right: 0
