//
// All topbar customization will be below
//
.ls-topbar
  height: $topbar-height
  position: fixed
  top: 0
  left: 0
  width: 100%
  z-index: 11

  &:after
    +box-shadow(0px 5px 8px -1px rgba(255,255,255,.5))
    content: ""
    width: 100%
    height: 6px
    position: absolute
    bottom: 0
    left: 0

  //
  // Product name / brand
  //
  .ls-brand-name
    font-size: remtopx(1.5)
    font-weight: 400
    color: #fff
    padding: 12px 0 15px
    height: $topbar-height
    text-align: center
    width: 67%
    margin: 0 auto
    line-height: 1.3

    a
      text-decoration: none
      color: #fff
      vertical-align: sub

      &:before
        display: none

      small, span
        @extend .ls-text-uppercase
        display: block
        font-weight: 300
        font-size: remtopx(.6875)
        letter-spacing: .5px
        opacity: .75
        margin-bottom: -2px

      &[class*="ls-ico"]
        display: inline-block
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        max-width: 200px

        small,
        span
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap

  //
  // Clickable items, including notifications and dropdown with user information.
  //
  .ls-notification-topbar
    float: right

    .ls-alerts-list
      display: inline-block
      vertical-align: middle
      margin-top: 20px

      & :before
        font-size: remtopx(1.25)
        margin: 0

      [class*="ls-ico"]
        margin-right: 14px
        position: relative
        display: none
        width: 22px
        text-align: center

        &:after
          content: attr(data-counter)
          position: absolute
          font-family: arial, sans-serif
          +border-circle(17px, 10px)
          background: #cc0000
          color: #fff
          top: -10px
          left: 10px
          display: none
          -webkit-font-smoothing: auto
          -moz-osx-font-smoothing: grayscale

          .ls-theme-light-red &
            background: blue

        &[data-counter]
          color: #fff

          &:after
            display: block

        &.ls-active
          color: #fff

        span
          display: none


  .ls-ico-menu,
  .ls-show-notifications
    cursor: pointer

    &:before
      position: absolute
      padding: 15px 15px 0
      height: $topbar-height
      display: inline-block
      color: #FFF
      font-size: remtopx(2)
      vertical-align: middle
      cursor: pointer

    &:after
      background: #fff
      content: ""
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 2424px
      display: none
      opacity: .8

  .ls-show-notifications:before
    right: 0
    font-size: remtopx(1.5)
    top: 4px

.ls-sidebar-visible .ls-ico-menu:after,
.ls-notifications-visible .ls-show-notifications:after
  display: block


@media screen and (min-width: $screen-sm)
  .ls-topbar
    text-align: left
    +single-transition(none)

    &:after
      left: $sidebar-width

    .ls-sidebar-visible &
      +translate(0, 0)

    .ls-notifications-visible &
      +translate(0, 0)

    .ls-brand-name
      font-size: remtopx(1.625)
      text-align: left
      width: auto
      display: inline-block
      padding-left: 15px
      position: relative
      z-index: 1

      a

        &:before
          display: block
          position: absolute
          top: 12px
          left: 15px
          font-size: remtopx(2.25)

        &[class*="ls-ico"]
          display: inline-block
          padding-left: 45px
          // max-width: 400px

        &[class*="ls-ico-panel"]
          padding-left: 52px

          &:before
            font-size: remtopx(3.375)
            top: 4px
            left: 7px

    .ls-ico-menu:before,
    .ls-show-notifications:before
      display: none

    .ls-notification-topbar

      .ls-alerts-list
        margin-top: 0
        height: $topbar-height

        [class*="ls-ico"]
          background: transparent
          border: none
          cursor: pointer
          display: inline-block
          height: inherit
          position: relative

          &:before,
          &:after
            left: 0
            position: absolute

          &:before
            top: 32%

          &:after
            top: 22%
            right: -7px
            left: auto

      .ls-user-account
        display: inline-block


@media screen and (min-width: $screen-lg)
  .ls-topbar .ls-brand-name a[class*="ls-ico"]
    max-width: 520px

@media screen and (min-width: $screen-sm) and (max-width: $screen-lg)
  .ls-topbar .ls-brand-name a[class*="ls-ico"]
    max-width: 248px
