.ls-sidebar
  background-color: mix($color-menu-mix, $color-menu-bg, 88%)
  width: $sidebar-width
  position: fixed
  left: 0
  top: 0
  height: 100%

  .ls-sidebar-toggle
    display: none

  .ls-sidebar-inner
    overflow: auto
    height: inherit

  .ls-user-account
    position: absolute
    bottom: 0
    left: 0
    padding: 0
    display: inline-block
    width: 100%
    background-color: #111
    z-index: 3

    ~ .ls-sidebar-inner
      height: calc(100% - 60px)

    > a[class*="ls-ico"]
      font-weight: 300
      height: 70px
      padding-left: 60px
      padding-top: 20px

      &:after
        +single-transition(none)
        content: "\e60f"
        position: absolute
        top: 25px
        right: 15px

      &:before
        background: $gray5
        position: absolute
        left: 15px
        top: 15px

      .ls-name
        display: block !important
        font-weight: 600
        top: -5px
        position: relative

    &.ls-active
      height: 100%

      > a:after
        +rotate(0)
        +single-transition(none)
        content: "\e63c"

    [class*="ls-ico"]
      padding: 15px

    .ls-user-menu
      background-color: #111
      position: static

  &.ls-area-account-active .ls-menu
    height: calc(100% - 160px)
    height: 100%\9
    padding-bottom: 160px\9

  .ls-brand-name
    padding: 40px 20px
    text-align: center
    font-size: remtopx(1.75)
    font-weight: 300
    line-height: 1.3

    a
      color: #fff

    &:before
      display: block
      color: #fff
      font-size: remtopx(4.5)

.ls-menu
  margin: 0
  padding: 0
  -webkit-overflow-scrolling: touch
  -moz-overflow-scrolling: touch
  -ms-overflow-scrolling: touch
  overflow-scrolling: touch

  .ls-pre-panel .ls-sidebar &
    height: calc(100% - 224px)

  li
    list-style: none
    border-bottom: 1px solid

    &.ls-active > a
      color: $color-menu-text

  a
    +single-transition(padding, .2s)
    display: block
    font-size: remtopx(.875)
    font-weight: 600
    line-height: 1.3
    text-decoration: none
    padding: 20px 20px 20px 59px
    position: relative
    width: $sidebar-width
    overflow: hidden
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale

    &:before
      +single-transition(all, .2s)
      font-size: remtopx(1.25)
      position: absolute
      top: 50%
      margin-top: -10px
      left: 19px

    &:focus,
    &:hover
      padding-left: 65px

      &:before
        left: 25px

.ls-submenu-parent
  position: relative

  > a
    padding-right: 35px

  ul
    height: 0
    display: none

  &:after
    +single-transition(all, .2s)
    content: "\e60b"
    font-family: 'locastyle'
    font-size: remtopx(.6875)
    position: absolute
    top: 24px
    right: 20px
    pointer-events: none

  &.ls-active

    a
      font-weight: 400

      &:hover,
      &:focus
        padding-left: 65px

    &:after
      +rotate(180deg)
      +single-transition(all, .2s)

    ul
      +single-transition(opacity, .3s)
      height: auto
      display: block
      border-top: 1px solid

      li:last-child
        border-bottom: none

.ls-area-account
  @if (lightness($color-menu-mix) < 30)
    background-color: mix($color-menu-mix, $color-menu-bg, 92%)
  @else
    background-color: mix($color-menu-mix, $color-menu-bg, 60%)

  border-bottom-color: mix($color-menu-mix, $color-menu-bg, 84%)
  padding: 20px 15px
  position: absolute
  bottom: 0
  width: 100%
  z-index: 2

  &[class*="ls-ico"]:before
    float: left
    font-size: 1.875em
    margin-right: 15px

  [class*="ls-title"]
    margin-bottom: 0
    padding-top: 0

    &:after
      display: inline-block

  .ls-title-2
    @if (lightness($color-menu-mix) < 30)
      color: mix($color-menu-mix, $color-menu-bg, 50%)
    @else
      color: $color-menu-bg
    font-size: remtopx(.6875)
    font-weight: normal
    text-transform: uppercase

  .ls-title-3
    color: $color-menu-text
    font-size: remtopx(.875)
    font-weight: normal
    margin: 3px 0 15px
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap

  [class*="ls-btn"]
    margin-left: 45px
    background-color: mix($color-menu-mix, $color-menu-bg, 85%)
    color: mix($color-menu-mix, $color-menu-bg, 40%)
    font-size: remtopx(.5625)
    border-color: mix($color-menu-mix, $color-menu-bg, 65%)

    &:hover
      background-color: mix($color-menu-mix, $color-menu-bg, 75%)

@media screen and (min-width: $screen-sm)
  .ls-sidebar
    +transform(none)
    +translate(0, 0)
    +single-transition(width, .25s, linear)
    float: none
    top: $topbar-height
    height: calc(100% - 60px)
    height: 93%\9

    // Sidebar menu
    .ls-menu
      height: 100%
      overflow: auto
      margin-top: 0

      > ul 
        padding-bottom: 42px

    .ls-area-account
      position: static

    .ls-user-account
      display: none

      ~ .ls-sidebar-inner
        overflow: auto
        height: 100%

    // Arrow to toggle Sidebar
    .ls-sidebar-toggle
      display: block
      position: absolute
      bottom: 0
      cursor: pointer
      width: 100%
      padding: 20px
      text-align: right
      border-top: 1px solid $gray5
      background: inherit
      +single-transition(width, .25s, linear)

      &:hover
        color: $color-menu-text
        background-color: mix($color-menu-mix, $color-menu-bg, 80%)

        &:before
          color: #fff

      &:before
        +single-transition(transform, .25s, linear)
        display: inline-block
        font-size: remtopx(0.69)
        font-weight: bold
        color: #7f7f7f
        width: 22px

////
// When the menu is Minimized
////
$sidebar-toggled-width: 60px

.ls-sidebar-toggled

  .ls-brand-name
    width: $sidebar-width
    padding: 16px
    width: auto
    text-align: left

    a
      display: none

    &:before
      font-size: inherit

  .ls-user-account ~ .ls-sidebar-inner
    overflow: initial

  .ls-sidebar-toggle:before
    +rotate(-180deg)
    margin-left: 4px

  .ls-sidebar
    width: $sidebar-toggled-width
    z-index: 11

  .ls-menu
    overflow: visible

    a:focus:before,
    a:hover:before,
      left: 19px

    > ul > li
      position: relative
      overflow: hidden

    //
    // LI that is parent of SUBMENU
    //
    .ls-submenu-parent
      &:after
        right: 5px
        font-size: 9px
        +rotate(-90deg)
        color: #595959

      &:hover:after
        color: #fff

      // The submenu UL
      .ls-submenu
        height: 0

      // When the Submenu is active,
      // we put a class .ls-active on his parent
      &.ls-active
        overflow: visible

        &:after
          color: #fff

        > a
          color: #fff
          background: inherit
          padding-left: 85px
          width: $sidebar-width + $sidebar-toggled-width
          font-weight: 600
          -moz-transition: none
          -webkit-transition: none
          transition: none

        // UL Submenu
        .ls-submenu
          height: auto
          position: absolute
          left: $sidebar-toggled-width
          background: inherit

          a
            -moz-transition: none
            -webkit-transition: none
            transition: none
            padding: 15px 25px

  .ls-area-account
    +single-transition(height, .4s)
    overflow: hidden
    width: $sidebar-width
    height: 70px


@media screen and (max-width: $screen-sm)
  .ls-sidebar .ls-user-account + [class*="ls-ico"] + .ls-menu,
  .ls-sidebar .ls-user-account + .ls-menu
    margin-top: $topbar-height
