sidenav-width = 150px
body.style-guide
  .sg-sidenav
    width sidenav-width
    font-size 12px
    line-height 12px

    &.affix
      width sidenav-width

    ul
      li
        a
          color rgba(0, 0, 0, 0.3)
          &:hover
            background transparent

          .list-header
            text-align left
            border-bottom 1px solid #e5e5e5

      li.active
        >a
          color rgba(0, 0, 0, 0.8)
          border-right solid rgba(0, 0, 0, 0.5) 1px
          //background linear-gradient(left, white, sidenav-border-color)

        ul
          display block

      ul
        padding-left 20px
        display none

        li.active
          >a
            color rgba(0, 0, 0, 0.6)
            border-right solid rgba(0, 0, 0, 0.1) 1px
            //background linear-gradient(left, white, lighten(sidenav-border-color, 50%))


  .sg-example
    position relative
    padding 45px 15px 15px
    margin 0 -15px 15px
    background-color #fafafa
    box-shadow inset 0 3px 6px rgba(0, 0, 0, 0.05)
    border-color #e5e5e5 #eee #eee
    border-style solid
    border-width 1px 0

    &:after
      content "Example"
      position: absolute
      top 15px
      left 15px
      font-size 12px
      font-weight 700
      color #bbb
      text-transform uppercase
      letter-spacing 1px


  @media (min-width: 768px)
    .sg-example
      margin-left 0
      margin-right 0
      background-color #fff
      border-width 1px
      border-color #ddd
      border-radius 4px 4px 0 0
      box-shadow none