#sidebar #logo
  +size(100% 110px)
  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
    width: 100%
    height: 50px
    padding: 25px 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: 50px
      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, >p
        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: 14px
        line-height: 24px
        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

        .sub-menu
          background-color: darken($darker-gray, 5%)
          li>a
            text-indent: grid-row(1)

      &.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)

      &.margin-top
        margin-top: 20px

      &.open, &.label
        >a, >p
          background-color: transparent
          border-color: #3b3d44
          font-weight: 200
          color: #949494
          font-size: 14px
          cursor: default

      &.group
        min-height: 0

      &.label
        >p
          margin: 20px 0 0
          padding-bottom: 5px
          min-height: 50px

      li
        > a
          text-indent: grid-row(.5)

      &.selector
        height: 110px
        padding: 50px 20px 20px
        min-height: 0
        overflow: hidden
        box-sizing: border-box
        transition: all 0.3s
        position: relative

        &:before
          content: 'School'
          position: absolute
          top: 30px
          left: 35px
          font-size: 12px
          line-height: 14px
          color: white

        p
          background-color: $darker-gray
          margin: 0
          height: 40px
          border-radius: 10px
          position: relative
          z-index: 10
          font-size: 13px
          padding: 9px 15px
          &:after
            content: ''
            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
            position: absolute
            right: 10px
            top: 19px
            transform: rotate(0deg)
            transform-origin: 50% 30%
            transition: all 0.3s

        ul
          margin-top: -50px
          padding-top: 10px
          background-color: $darker-gray
          border-radius: 0 0 10px 10px
          opacity: 0
          transition: all 0.3s
          li
            color: #949494
            padding: 10px 15px
            min-height: 0
            height: 20px
            width: 170px
            font-size: 14px
            line-height: 16px
            cursor: pointer
            transition: color 0.3s
            &:hover
              color: white

        &.active
          height: 395px
          p
            border-bottom-color: $brand-primary
            &:after
              transform: rotate(180deg)
          ul
            margin-top: -10px
            opacity: 1

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