@import 'colors'

.queue-item-enter
  transform: translate(100%)

.queue-item-enter.queue-item-enter-active
  transform: translate(0%)
  transition-duration: 0.2s
  transition-timing-function: linear

.queue-item-leave
  transform: translate(0%)


.queue-item-leave.queue-item-leave-active
  transform: translate(100%)
  opacity: 0.01
  transition-duration: 0.4s
  transition-timing-function: linear


.queue
  width: 35%
  height: 450px
  position: fixed
  opacity: 0
  bottom: 48px
  right: 50px
  box-shadow: 0 0 8px rgba(0,0,0,.3)
  background: #fff
  z-index: 1
  overflow-x: hidden
  transition-property: -webkit-transform,opacity
  transition-property: transform,opacity
  transition-duration: .2s
  transition-timing-function: cubic-bezier(.66,-.41,1,1)
  -webkit-transform: translateY(100px)
  transform: translateY(100px)
  pointer-events: none
  opacity: 0

  &-visible
    pointer-events: auto
    -webkit-transform: translateY(0)
    transform: translateY(0)
    opacity: 1
    transition-duration: .35s
    transition-timing-function: cubic-bezier(0,0,0,1.2)

  &-panel
    height: 54px
    padding: 9px 24px
    padding-bottom: 0
    border-bottom: 1px solid #e5e5e5
    > div
      float: left
      display: flex
      height: 41px
      align-items: center
  &-title
    width: 70%
    font-size: 15px
    color: $light-blue
  &-clear
    width: 20%
    button
      display: inline-block
      position: relative
      height: 26px
      margin: 0
      padding: 2px 11px 2px 10px
      border: 1px solid #e5e5e5
      border-radius: 3px
      background-color: #fff
      cursor: pointer
      color: #333
      font-size: 14px
      line-height: 20px
      white-space: nowrap
      font-weight: 100
      text-align: center
      vertical-align: baseline
      -webkit-user-select: none
      -moz-user-select: none
      -ms-user-select: none
      box-sizing: border-box
  &-hide
    width: 10%
    button
      background-image: url(https://a-v2.sndcdn.com/assets/images/play-queue/close-dcc8a56.svg);
      background-position: center
      background-repeat: no-repeat
      background-size: 24px 24px
      cursor: pointer

.queue-list
  max-height: 390px
  overflow-x: hidden
  overflow-y: scroll
  li
    height: 58px
    position: relative
    margin-bottom: 5px

    &:hover
      background-color: rgb(248, 248, 248)
  &-thumb
    padding: 5px 10px 5px 20px
    float: left
    img
      width: 48px
      height: 48px
  &-info
    width: calc(100% - 30% - 78px)
    float: left
    padding: 10px
    padding-left: 0
    a
      color: #999
      font-size: 13px
.queue-track-actions
  width: 30%
  float: left
  display: flex
  align-items: center
  justify-content: center
  height: inherit
  i
   margin-right: 15px
   color: #999
   cursor: pointer

.queue-track-artist
  font-size: 12px
  margin-top: 5px
  color: $grey-text

.queue-track-title
  a
    color: $light-blue
