@import base

body
    padding-top: 0

$playerWidth: 320px
$playBtnHeight: 35px

.bar
    +inline-block
    +size(2px, 100px)
    cursor: pointer
    background: $white
    position: relative
    .ui-slider-range
        height: 2px
        background: $orange
    .ui-slider-handle
        +square(5px)
        +border-radius(50%)
        position: absolute
        background: $orange
        top: -1.5px

#player-demo
    +inline-block
    +pie-clearfix
    +box-shadow(rgba(0,0,0,0.3) 1px 1px 1px)
    margin-bottom: 20px
    width: $playerWidth
    background: $blue
    position: relative
    padding-bottom: 3px
    .glyphicon
        color: $white
        &:hover
            color: $whiteBlue
    .opts
        padding-left: 12px
        position: absolute
        left: 0
        top: 50%
        margin-top: -$playBtnHeight / 2
        > span
            cursor: pointer
        .ctrl
            +inline-block
            +border-radius(50%)
            +square($playBtnHeight)
            text-align: center
            border: 2px solid $white
            &:hover
                background: $darkBlue
                i
                    color: $white
            i
                font-size: 17px
                line-height: 29px
        .mode
            margin-left: 12px
            i
                width: 1.2em
    .volume
        position: absolute
        left: 140px
        top: 50%
        margin-top: -10px
        i
            width: 1.2em
            text-align: left
            color: $orange
            cursor: pointer
            &:hover
                color: $orange
        .bar
            @extend .bar
        &.mute
            .bar
                background: $whiteBlue
    .avatar
        &, img
            +float-right
            +square(50px)
    .progress-bar
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        background: $white
        @extend .bar
        &, .ui-slider-range
            height: 3px
        &.ui-state-disabled
            cursor: default
            .ui-slider-handle
                cursor: default