#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%)
      min-height: 60px
      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.3s
        overflow: hidden
        height: 0px

      &.active > ul.sub-menu, &.open > ul.sub-menu
        height: auto
      &.toggle-ul
        &.active, &:hover
          >a
            background-color: transparent
            border-color: lighten($sidebar-background-color, 4%)
        >a
          background-color: transparent
          &:after
            content: ''
            +transition(transform .2s)
            +transform-origin(50% 30%)
            background-image: url('/packages/komma/kms/img/structure/icon_triangle_down_grey.svg')
            background-size: contain
            background-repeat: no-repeat
            height: 7px
            width: 10px
            display: inline-block
            margin-left: 10px
        &.active
          >a:after
            +transform(rotate(180deg))
        &.active-child
          >a
            background-color: mix($brand-primary, $sidebar-background-color)
      &.open
        >a
          background-color: transparent
          border-color: #3b3d44
          font-weight: 200
          color: #949494
          font-size: 14px
          cursor: default

      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%)