controls-height = 45px
controls-bg = #f2f2f2
controls-border-color = #cecece

$show-volume-slider
    transform rotate(270deg) translate(120px, -45px)
    opacity 1
    pointer-events all

.controls
    position fixed
    bottom 0
    left 0
    right 0
    padding 0 20px
    border-top 1px solid controls-border-color
    background controls-bg
    transform translate(0, 0)
    transition .2s
    z-index 1
    &.init
        transform translate(0, 100px)

    > *
        display inline-block
        vertical-align middle

    // .controls-buttons
    &-buttons
        margin 0
        line-height 0

    button
        width 40px
        height controls-height
        line-height 0
        padding 0
        margin 0
        border 0
        background no-repeat 50% 50%
        opacity .8
        transition .2s
        cursor pointer
        &:hover
        &:focus
            opacity .9
        &:acive
            opacity 1

    [data-button=prev]
        background-image getImage('prev')
    [data-button=play]
        background-image getImage('play')
        .playing&
            background-image getImage('pause')
    [data-button=next]
        background-image getImage('next')
    [data-button=shuffle]
        background-image getImage('shuffle')
    [data-button=volume]
        background-image getImage('volume-normal')
        &[data-state=max]
            background-image getImage('volume-max')
        &[data-state=mute]
            background-image getImage('volume-mute')

    // .controls-timeline
    &-timeline
        //                 padding    buttons    title
        width calc(100% - (20px * 2 + 40px * 4 + 250px))

        > *
            display inline-block
            vertical-align middle

        // .controls-timeline-current
        &-current
        // .controls-timeline-duration
        &-duration
            font-size 14px
            width 60px

        // .controls-timeline-current
        &-current
            color orange
            text-align right

        // .controls-timeline-slider
        &-slider
            width calc(100% - (60px * 2))

    // .controls-volume
    &-volume
        position relative
        &:hover
            .controls-volume-slider
                @extend $show-volume-slider

        button
            display block
            background-position 10px 50%
            &:focus + *
                @extend $show-volume-slider

        // .controls-volume-slider
        &-slider
            position absolute
            width 120px
            padding 6px 8px 4px
            border 1px solid controls-border-color
            background controls-bg
            transform rotate(270deg) translate(60px, -45px) scale(.8)
            opacity 0
            pointer-events none
            transition .2s
            &:before
            &:after
                position absolute
                content ''
                border solid transparent
                border-width 9px 9px 9px 0
            &:before
                left -9px
                border-right-color controls-border-color
            &:after
                left -8px
                border-right-color controls-bg

    // .controls-title
    &-title
        width 250px
        line-height controls-height
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
        text-decoration none
        color text-color

    @media small
        controls-height = 35px
        width 100%
        right 0
        padding 0 10px

        button
            width 30px
            height controls-height
            background-size 50%

        // .controls-title
        &-title
            width calc(100% - 90px)

        // .controls-timeline
        &-timeline
            //                 buttons
            width calc(100% - (30px * 4))

            // .controls-timeline-current
            &-current
            // .controls-timeline-duration
            &-duration
                font-size 12px
                width 40px

            // .controls-timeline-slider
            &-slider
              width calc(100% - (40px * 2))

        // .controls-title
        &-title
            display block
            width 100%
            line-height controls-height

        // .controls-volume
        &-volume
            display none

@require slider