@import 'nib'

.sidebar
  position: absolute
  top: 0
  bottom: 0
  right: 0

  .sidebar-shadow
    position: absolute
    top: 0
    bottom: 0
    right: 0
    left: 0
    background: darken(white, 3%)
    box-shadow: -10px 0px 5px -10px darken(white, 30%)
    z-index: 10

  .sidebar-content
    padding: 12px
    margin-bottom: 1.6em
    position: absolute
    top: 0
    bottom: 0
    right: 0
    left: 0
    overflow-x: hidden
    overflow-y: auto

    .hide-btn
      display: none

    h3
      color: darken(white, 50%)
      font-size: 1em
      margin-bottom: 10px

      i.fa
        margin-right: 3px

    hr
      margin: 13px 0

    ul.sidebar-list
      display: flex
      flex-direction: column

      li > a
        display: flex
        height: 30px
        margin: 0
        padding: 4px
        border-radius: 3px
        align-items: center

        &:hover
          &, i, .quiet
            color white

        .member, .card-label
          margin-right: 7px
          margin-top: 5px

        .sidebar-list-item-description
          flex: 1
          overflow: ellipsis

        .fa.fa-check
          margin: 0 4px

    .sidebar-btn
      display: block
      margin: 5px 0
      padding: 10px
      border-radius: 3px
      background: darken(white, 10%)

      &:hover *
        color: white

      i.fa
        margin-right: 10px

  .sidebar-shortcuts
    margin: 0
    padding: 0
    top: auto
    text-align: center
    font-size: 0.8em
    line-height: 1.6em
    vertical-align: middle
    color: darken(white, 40%)

.board-sidebar
  width: 248px
  right: -@width
  transition: top .1s, right .1s, width .1s

  &.is-open
    right: 0

.board-widget h4
  margin: 5px 0

.board-widget-activity
  margin-right: -4px

.sidebar-tongue
  display: block
  width: 30px
  height: @width
  left: -@width
  position: absolute
  top: 0px
  z-index: 15
  background: darken(white, 3%)
  border-bottom-left-radius: 3px
  box-shadow: -4px 0px 7px -4px darken(white, 30%)
  color: darken(white, 50%)
  transition: left .1s

  i.fa
    padding: 3px 9px
    font-size: 24px
    transition: transform 0.5s

  .board-sidebar.is-open &
    left: -@width + 2px

    // XXX Bug: we should add a padding left
    &:hover
      left: -@width + 5px

    i.fa
      transform: rotate(180deg)

  &.is-hidden,
  .board-sidebar.is-open &.is-hidden
    z-index: 0
    left: 5px

.archived-lists .archived-lists-item
  border-top: 1px solid darken(white, 20%)
  clear: both
  padding: 5px 0

  &:first-child
    border-top: none

  button
    float: right
    margin: 0
    margin-bottom: 5px
    padding: 0 2px 0 10px

@media screen and (max-width: 800px)
  .board-sidebar
    width: 100%
    right: -@width

    .sidebar-content
      .hide-btn
        width: 40px
        height: @width
        position: absolute
        right: 5px
        top: 5px
        display: block
        z-index: 15
        background: darken(white, 3%)
        transition: left .1s
        color: darken(white, 50%)
        border-radius: 50%
        border: 1px solid darken(white, 30%)
        box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
        color: darken(white, 50%)

        i.fa
          padding: 8px 16px
          font-size: 24px
          font-weight: bold

  .sidebar-tongue
    width: 40px
    height: @width
    left: -@width - 7px
    top: 5px
    display: block
    border-radius: 50%
    border: 1px solid darken(white, 30%)
    box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
    color: darken(white, 50%)

    .board-sidebar.is-open &
      display: none

    i.fa
      padding: 8px 0px 8px 16px
      font-weight: bold