//- Daily UI #009 Music Player
.music-box
  .album
    .photo
    .infos
      .song
        span Flamingo
        small Oliver Heldens
  .dashboard
    .list
      .list-btn: span
    .player
      .time
        small.current 0:56
        |  / 
        small.duration 3:04
      .time-rail
        .thumb
        .track
    .action-button
      a.random: i.fa.fa-random
      a.prev: i.fa.fa-step-backward
      a.play-pause: i.fa.fa-pause
      a.stop: i.fa.fa-stop
      a.next: i.fa.fa-step-forward
      a.repeat: i.fa.fa-repeat
      a.volume: i.fa.fa-volume-up
  .lists
    .label MENU
    .box
    ul
      - for(var i = 0; i < 10; i++)
        li
          span Flamingo
            small Oliver Heldens
          em 3:04

@import 'https://fonts.googleapis.com/css?family=Open+Sans'
$color: (main: #463239, accent: #ffba49, light: #c6ad94)
=bdrs($bdrs)
  border-radius: $bdrs
=size($w, $h)
  width: $w
  height: $h
*
  outline: none
  user-select: none
body, html
  margin: 0
  background: #ddd
body
  font-family: 'Open Sans', 'Microsoft JhengHei', Arial, sans-serif

.music-box
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)
  padding: 15px
  +size(364px, initial)
  background-color: map-get($color, main)
  box-shadow: 0 0 15px #535353
  +bdrs(3px)
  overflow: hidden
  .album
    position: relative
    .photo
      background: url('https://images.unsplash.com/photo-1533475184589-ad2b25374b56?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80') no-repeat 100% 100%
      background-size: cover
      +size(100%, 300px)
    .infos
      background-color: rgba(map-get($color, main), .3)
      +size(100%, 60px)
      position: absolute
      bottom: 0
      .song
        padding: 10px
        color: map-get($color, light)
        letter-spacing: .5px
        span, small
          display: block
  .dashboard
    margin-top: 15px
    .list
      position: relative
      transition-duration: .3s
      background-color: #eee
      right: 0
      .list-btn
        z-index: 2
        background-color: map-get($color, accent)
        +size(44px, 44px)
        position: absolute
        right: 5px
        top: -44px
        cursor: pointer
        transition-duration: .3s
        transition-delay: .9s
        span
          top: 50%
          left: 50%
          transform: translate(-50%, -50%)
          display: block
          +size(28px, 1px)
          background-color: map-get($color, main)
          position: relative
          transition: width .3s .3s, background-color .3s .6s
          transition-timing-function: linear
          &::before, &::after
            background-color: map-get($color, main)
            content: ""
            +size(28px, 1px)
            position: absolute
            left: 0
            top: 0
            transition-timing-function: linear
            transition: width .3s .3s, margin .3s .6s, transform .3s .3s
          &::before
            margin-top: 6px
          &::after
            margin-top: -6px
      &.active
        .list-btn
          top: -322px
          transition: top .3s .6s
          span
            background-color: transparent
            width: 34px
            transition: width .3s, background-color .3s
            &::before, &::after
              margin: 0
              width: 34px
              transition: width .3s, margin .3s, transform .3s .3s
            &::before
              transform: rotate(225deg)
            &::after
              transform: rotate(315deg)
    .player
      .time
        color: map-get($color, light)
      .time-rail
        height: 1px
        position: relative
        padding: 15px 0
        overflow: hidden
        .thumb, .track
          position: absolute
          top: 50%
          transform: translateY(-50%)
          cursor: pointer
        .thumb
          +size(10px, 10px)
          +bdrs(50%)
          background-color: map-get($color, accent)
          z-index: 1
          left: 30%
          transition: .3s
          &:hover
            transform: translateY(-50%) scale(1.2)
          &::before
            content: ''
            +size(500px, 1px)
            background-color: map-get($color, accent)
            position: absolute
            top: 50%
            transform: translateY(-50%)
            right: 0
        .track
          top: 50%
          +size(100%, 1px)
          background-color: map-get($color, light)
        input[type="range"]
          width: 100%
          -webkit-appearance: none
          overflow: hidden
          background: none
          &::-webkit-slider-thumb
            -webkit-appearance: none
            position: relative
            +size(10px, 10px)
            +bdrs(50%)
            background-color: map-get($color, accent)
    .action-button
      text-align: center
      a
        cursor: pointer
        display: inline-block
        +size(44px, 44px)
        margin: 3px
        line-height: 44px
        color: map-get($color, light)
        transition-duration: .3s
        &:hover
          color: map-get($color, accent)
          &.play-pause
            border-color: map-get($color, accent)
        &.play-pause
          +bdrs(50%)
          border: 1px solid map-get($color, light)
          font-size: 1.5em
          +size(54px, 54px)
          line-height: 54px
          &.active
            border-color: map-get($color, accent)
            i::before
              content: "\f04b"
              margin-left: 5px
        &.active
          color: map-get($color, accent)
    
  .lists
    z-index: 1
    position: absolute
    +size(100%, 100%)
    top: 0
    left: 0
    background-color: map-get($color, main)
    transform: translateX(-100%)
    transition: .3s 0s
    &.active
      transform: translateX(0)
      transition: .3s .9s
    .label
      font-size: 2em
      padding: 8px 15px
      height: 60px
      box-sizing: border-box
      color: map-get($color, accent)
    ul
      padding-left: 0
      margin: 0
      list-style-type: none
      +size(100%, calc(100% - 60px))
      position: absolute
      overflow-y: auto
      background-color: map-get($color, light)
      &::-webkit-scrollbar
        width: 6px
        background-color: transparent
      &::-webkit-scrollbar-track
        background-color: map-get($color, main)
      &::-webkit-scrollbar-thumb
        background-color: map-get($color, accent)
        +bdrs(3px)
      li
        cursor: pointer
        padding: 5px 15px
        transition-duration: .3s
        span, em
          display: inline-block
        span
          small
            display: block
        em
          float: right
          top: 0
          font-style: normal
          font-size: 12px
          margin-top: 12px
        &:nth-of-type(odd)
          background-color: rgba(map-get($color, main), .1)
        &:hover
          background-color: rgba(map-get($color, main), .3)

$(".list-btn").click ->
  $(this).parent().toggleClass "active"
  $(".lists").toggleClass "active"
$(".action-button").find('a').click ->
  if $(this).hasClass("random") || $(this).hasClass("play-pause") || $(this).hasClass("repeat")
    $(this).toggleClass "active"