// Top navigation
.navbar
  font-size: 18px

  .brand
    color: $firm
    font-size: inherit
    font-weight: 700
    padding-bottom: 16px
    padding-top: 15px

  .nav
    // First level nav
    > li
      &:hover
        > ul
          top: 100%

      // Second level nav
      > ul
        padding-top: 13px
        top: 80%
        // IE treats transparent background as not hoverable area. Let's fix that.
        background-color: #{$inverse}\9
        // Dropdown triangle ear
        +dropdown-arrow

        // Third level nav
        li
          &:hover
            ul
              opacity: 1
              -webkit-transform: scale(1, 1)
              display: block\9
          ul
            left: 100%

      // First level level
      > a
        padding: 14px 15px 17px
        &:hover
          color: $firm

    li
      position: relative

      &:hover
        > ul
          opacity: 1
          z-index: 100
          -webkit-transform: scale(1, 1)
          // Show on hover
          display: block\9

    // Sub menu
    ul
      border-radius: 4px
      left: 15px
      list-style-type: none
      margin-left: 0
      opacity: 0
      position: absolute
      top: 0
      width: 234px
      z-index: -100
      // Trigger transform to hide nav completely without 'ghost' bug (when switching from :hover to initial)
      -webkit-transform: scale(1, .99)
      -webkit-transform-origin: 0 0
      // Don't show it at all by default since IE doesn't get modern transitions
      display: none\9
      +transition(.3s ease-out)

      // Deep level sub menu
      ul
        left: 95%
        padding-left: 5px

      // Sub menu item
      li
        background-color: $base
        padding: 0 3px 3px

        &:first-child
          border-radius: 4px 4px 0 0
          padding-top: 3px

        &:last-child
          border-radius: 0 0 4px 4px

        &.active
          > a, > a:hover
            background-color: $firm
            color: $inverse

      // Sub menu link
      a
        border-radius: 2px
        color: $inverse
        display: block
        font-size: 14px
        padding: 6px 9px
        text-decoration: none
        &:hover
          background-color: $firm

.navbar-inner
  border: none
  padding-left: 4px
  padding-right: 4px
  +border-radius(6px)
  +drop-ie-gradient

// Inverse skin --------------------------
.navbar-inverse
  .navbar-inner
    background: $base
    +drop-ie-gradient

  .nav
    > li > a
      color: $inverse

    .active > a
      &, &:hover, &:focus
        background-color: transparent
        color: $firm
        +box-shadow(none)

// Unread icon ---------------------------
.navbar-unread
  background-color: $danger
  border-radius: 30px
  color: $inverse
  display: none
  font-size: 12px
  font-weight: 500
  line-height: 18px
  min-width: 8px
  padding: 0 5px
  position: absolute
  right: -7px
  text-align: center
  text-shadow: none
  top: 8px
  z-index: 10

  .active &
    display: block