// Sidebar
#sidebar
  position: relative
  padding-bottom: 60px
  z-index: 15
  background: #fff
  +calculate(width, "25% - 32px")

  +respond-to(medium)
    +calculate(width, "25% - 40px")

  .shadow
    position: absolute
    top: 0
    right: -8px
    width: 8px
    height: 100%
    background: url(/images/structure/shadow.jpg) repeat-y

  .back-btn
    +grid-margin-s($top: 1)

// Background
.bg-sidebar
  display: block
  position: absolute
  top: 0
  left: -1000%
  width: 1000%
  height: 100%
  background: #fff

// Title
.sidebar-title
  +grid-margin-s($bottom: .5)
  color: $dark-grey
  +type-medium-title
  line-height: 1.8 // 36px

.side-bar-logo
  display: block
  +grid-margin-s($bottom: .75)
  max-width: 200px

// Group title
.submenu
  +dashed-border(bottom)
  +grid-margin-s($bottom: .75)

  .title
    display: block
    +grid-height
    color: $blue
    +dashed-border(top bottom)
    +type-small-title-uc
    +grid-line-height
    +box-sizing(border-box)

  ul
    +grid-padding-s($bottom: .75)

  li
    a
      position: relative
      left: -20px
      padding: .25em 0 .25em 20px
      display: block
      color: $grey
      font-size: 1.5em

      //+transition(transform 50ms, border-color 50ms, box-shadow 50ms)
      +transition(color 100ms)
      &:hover
        //background: #F3F8FB
        color: $blue
        //+transform(scale(1.02))

        //border-color: #9ecaed
        //box-shadow: 0 0 5px #9ecaed

      .plus
        position: relative
        top: -1px
        left: 0
        display: inline-block
        margin-left: 3px
        +icon-sprite(8 ,5,8px,8px)
        @extend %icon-sprite

    & > ul
      border: none
      position: relative
      overflow: hidden
      height: 0
      margin: 0
      +grid-padding-s(0,.5,0,.5)
      border-left: 3px solid $blue

      & > li
        & > a
          +light
          &:hover
            color: $blue

    &.active
      & > a
        color: $blue
        +bold

        .plus
          display: none

      & > ul
        height: auto
        margin: .5em 0
        & > li
          & > a
            color: $grey
            +light
            &:hover
              color: $blue 

          &.active
            & > a
              +bold
              color: $dark-grey

              &:hover
                color: $blue

.sidebar-brand
  +dashed-border(bottom)
  +grid-margin-s($bottom: 1)
  +grid-padding-s($bottom: 1)