.Sidebar
  width 60px
  height 100vh
  position relative
  float left
  z-index 2
  &-container
    height 100%
    background $bz-grey--darker
    display flex
    justify-content space-between
    flex-direction column
  .FlyoutMenu
    boxShadow()
    font-size 13px
    position absolute
    left -500px
    top 39px
    height calc(100vh - 39px)
    z-index -1
    background $bz-black
    box-sizing border-box
    width 500px
    padding 20px 20px 20px 75px
    simpleTransition(transform)
    transform translateX(0)
    transition-delay 0
    p
      color $bz-white
      line-height golden(13, 355)
      &:not(:last-child)
        margin-bottom golden(13, 355)

  &-launch
    display flex
    button
      border 0
      outline 0
      background $bz-grey--darker
      color $bz-white
      padding .75em 0
      font-size 1em
      cursor pointer
      text-align center
      flex 1
      simpleTransition(background)
      &:hover
        background $bz-blue
      &:first-of-type
        margin-right 1.25em
  &-logo
    height 39px // same height as workspace tab bar
    width 60px
    background $bz-grey--darker
  &-tools
    padding-bottom 20px
    li:hover
      .FlyoutMenu
        transform translateX(500px)
        transition-delay .2s
      .Sidebar-btn
        color $bz-white
        background $bz-black
        cursor pointer
  &-btn
    padding 0
    outline 0
    border 0
    font-size 1em
    width 60px
    height 65px
    color $bz-grey--light
    background $bz-grey--darker
    transition color 0.2s ease, background 0.2s ease
    label, i
      display block
      pointer-events none
    i
      font-size 1.25em
      margin-bottom .25em
    label
      font-size .5em
  &-snapshots
    background $bz-grey--darker

.snapshot
  simpleTransition(background)
  cursor pointer
  &:hover
    background $bz-black
  color $bz-white
  font-size .8em
  border-top 1px solid $bz-black
  text-align center
  padding .5em 0
  &__name
    padding-bottom .25em