// Custom styles for the menu aka toolbar aka navbar
.toolbar
  width:100%;
  top:0
  left:0
  z-index:998
  background-color: $color-toolbar
  border-bottom: 1px solid darken($color-herobox, 12%)
  > ul > li
    display: inline-block
// Mobile menu button
.toolbar-mobile-nav
  display: inline-block
  padding-left: 0.618em
  padding-right: 0.618em
  @media screen and (min-width:768px)
    display: none
.toolbar-mobile
  @extend $hrpg-button
  @extend $hrpg-modal-dropdown-right
  hrpg-button-color-mixin($color-toolbar)
// Top level menu items: Tasks – User – Social – Inventory
.toolbar-nav
  float:left;
  padding: 0.618em
  @media screen and (max-width:768px)
    display: none
  > li
    margin-right: 0.618em
  .toolbar-button-dropdown
    @extend $hrpg-button-toggle
    @extend $hrpg-modal-dropdown-right
    hrpg-button-color-mixin($color-toolbar)
  .toolbar-button
    @extend $hrpg-button
    hrpg-button-color-mixin($color-toolbar)
    > a
      display:inline-block
      height:100%
// Information bar: Bailey – notifs – currency – subscribe button
.toolbar-bailey, .toolbar-wallet, .toolbar-options, .toolbar-subscribe
  float:right
  padding: 0.618em 0.618em 0.618em 0
  @media screen and (max-width:768px)
    float: none
    display: inline-block
    padding: 0.618em 0.382em 0.618em 0
.toolbar-wallet
  .gem-wallet
    .Gems
      margin-top: 0em
    span
      display:inline-block
      vertical-align:top
      padding-top: 0.382em
.toolbar-currency
  padding-top: 0.236em
  padding-bottom: 0.236em
  vertical-align:top
.toolbar-currency.gold
  color: darken($neutral,61,8%)
.toolbar-currency.silver
  color: #999
.toolbar-options, .toolbar-wallet
  > li
    margin-left: 0.618em
@media screen and (max-width:768px)
  .toolbar-options
    > li
      padding-left:0em
      margin-left:0em
      margin-right: 0.618em
.toolbar-sync, .toolbar-settings
  @extend $hrpg-button
  hrpg-button-color-mixin($color-toolbar)
@media screen and (min-width:768px)
  .toolbar
    position:fixed
// Notifications icon and dropdown
.toolbar-notifs
  @extend $hrpg-button
  @extend $hrpg-modal-dropdown-left
  hrpg-button-color-mixin($color-toolbar)
  > a span.inactive
    opacity: 0.236 !important
  div
    padding-bottom: 1em
    width: 300px
    @media screen and (max-width:768px)
      width: 96%
    .toolbar-notifs-notifs
      padding-bottom:1em
      li
        .glyphicon
          margin-right: 0.618em
          height: 100%
      a:nth-of-type(1)
        width: 84%
      a:nth-of-type(2)
        width: 16%
        text-align: center
        .glyphicon-remove-circle
          margin: 0px
.toolbar-notifs-no-messages
  padding: 0.382em 1em
// Settings dropdown
.toolbar-settings
  @extend $hrpg-modal-dropdown-left
.toolbar-controls
  @extend $hrpg-modal-controls
  .toolbar-controls-button
    @extend $hrpg-button
    hrpg-button-color-mixin(lighten($color-toolbar,32.8%))
.toolbar-subscribe-button, .toolbar-controls .toolbar-subscribe-button
  @extend $hrpg-button-call-to-action
@media screen and (max-width:768px)
  .toolbar-mobile, .toolbar-settings
    .toolbar-submenu
      padding-left: 1em
      display: block
      li
        display:inline-block
        a
          padding-left: 0em
  .toolbar-subscribe
    display:none