#sidebar #logo
  +size(100% 140px)
  background-color: $brand-primary
  background-image: url('../img/#{$resourceRoutePre}logo_background.svg')
  background-size: cover
  -webkit-background-origin: border
  text-align: center
  letter-spacing: .05em

  a
    display: block
    +size(100% 100%)
    padding: 40px 0 20px 0
    color: $white
    text-decoration: none

  img
    +size(135px 60px)
    border: none

  h1
    font-size: $sidebar-logo-font-size
    font-weight: $sidebar-logo-font-weight
    color: $darker-gray
    margin: 0

.sidebar-scrollable
  overflow: auto
  position: fixed
  top: 140px
  bottom: grid-row(2)
  width: 240px

.sidebar-navigation
  ul
    display: block
    margin: 0
    padding: 0
    list-style: none

    li
      display: block
      +size(100% 100%)
      font-size: $font-size-large

      &.empty-item
        +box-sizing(border-box)
        line-height: grid-row()
        border-bottom: solid 1px #3b3d44
        padding: grid-row(.5) 15px (grid-row(.5) - 1px) 20px

      a
        display: block
        +box-sizing(border-box)
        +size(100% 100%)
        padding: grid-row(.5) 15px (grid-row(.5) - 1px) 20px
        border-bottom: solid 1px lighten($sidebar-background-color, 4%)

        font-size: $sidebar-font-size
        line-height: grid-row()
        color: $sidebar-font-color
        font-weight: $sidebar-font-weight
        text-decoration: none

        transition: all 0.3s

        i.fa
          float: right
          line-height: inherit

        &:hover
          background-color: darken($brand-primary, 5%)
          border-color: darken($brand-primary, 5%)
          color: white

      &.active > a
        background-color: $brand-primary
        border-color: $brand-primary
        color: white

      ul.sub-menu
        display: block
        position: relative
        float: none
        box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, .7)
        background-color: $darker-gray
        border: none
        transition: all 0.3
        overflow: hidden
        height: 0px

      &.active > ul.sub-menu
        height: auto

      li
        > a
          font-size: $font-size-base
          text-indent: grid-row(.5)

  &.sidebar-navigation-bottom
    position: absolute
    bottom: 0px
    width: 100%
    background-color: #32343a

    ul li a
      border-bottom: none
      border-top: solid 1px lighten($sidebar-background-color, 4%)