thomasklemm/pluginGeek

// topbar
.topbar
  background: $topbar-background-color
  color: $topbar-font-color
  height: 40px
  line-height: 40px

  .container > *
    font-size: 14px

  // links
  a.login, a.logout, .brand a, a#Intercom
    color: $topbar-font-color
    &:hover
      text-decoration: underline

  // brand
  .brand
    float: left
    font-size: 16px
    font-weight: 600
    text-rendering: optimizeLegibility
    a
      padding: 1rem
      margin-left: -1rem

  // friendly greeting
  .happy-day
    color: #e9e9e9

  // logged in or logged out user
  .user-details
    float: right
    .user-signed-in
      .avatar
        $avatar-size: 32px
        width: $avatar-size
        height: $avatar-size

        vertical-align: middle
        border-radius: 4px
      .name
        margin-left: 0.5rem
      .intercom
        margin-left: 1.25rem
        margin-right: 0.25rem
      .logout
    .user-signed-out
      .login

  // login / logout padding
  a.login, a.logout
    padding: 1rem
    margin-right: -1rem

  // intercom messages
  .intercom
    // new messages in inbox count
    em
      padding: 11px 10px 12px
      background: #fff
      color: #900 !important
      &:after
        content: "\a0 new"