$primaryColor: #D80A60
$secondaryColor: darken($primaryColor, 30)
$buttonBackground: #676767

$breakpoint: 500px

//$secondaryColor: #65394F

.button
    border: 2px solid  #FFFFFF
    border-radius: 50%
    font-size: 25px
    text-align: center
    width: 50px
    height: 50px
    vertical-align: middle
    line-height: 2
    color: #fff
    background-color: $buttonBackground
    display: inline-block
    cursor: pointer
    &.active
        color: $primaryColor
        background-color: darken($buttonBackground, 30)

.header
    position: fixed
    top: 0px
    width: 100%
    height: 40px
    background-color: $primaryColor
    border-bottom: 1px solid #676767
    z-index: 1000
    display: flex
    flex-direction: row
    .brand
        display: inline-flex
        flex-direction: column
        color: #fff
        line-height: 40px
        font-size: 20px
        height: 100%
        margin: 0px 10px
    .search
        display: inline-flex
        flex-direction: column
        height: 100%
        width: 100%
        .searchBox
            font-size: 16px
            padding: 0px 5px
            //border: 1px solid #676767
            outline: none
            height: 100%
            width: 100%
            color: $primaryColor
            background-color: #fff !important
            border-style: none
        .searchClear
            position: absolute
            right: 45px
            top: 0px
            padding: 12px 20px
            cursor: pointer
    .fullscreen
        display: inline-flex
        flex-direction: column
        height: 100%
        /*width: 70px*/
        padding: 0px 20px
        cursor: pointer
        text-align: center
        background-color: $primaryColor
        .fa
            color: #ffffff
            line-height: 40px
    .volume
        display: flex
        flex-direction: row
        width: 15%
        height: 100%
        .volumeControl
            height: 5px
            margin-top: 20px
        .volumeIcon
            font-size: 30px
            color: #fff
            line-height: 40px
            height: 100%

.songs
    position: absolute
    top: 41px
    bottom: 150px 
    overflow-y: auto
    display: flex
    flex-direction: row
    width: 100%
    background: url("../img/squares.png")

.songList
    width: 100%
    display: flex
    flex-direction: column
    font-size: 18px
    line-height: 1
    .song
        color:  #fff
        padding: 10px 5px
        background-color: rgba(51, 51, 51, 0.6)
        font-size: 14px
        line-height: 20px
        &:nth-child(even)
            background-color: rgba(100, 100, 100, 0.6)
        .details
            white-space: nowrap
            text-overflow: ellipsis
            overflow: hidden
            .name
                display: inline
            .addtrack
                cursor: pointer
                display: inline
                padding: 0px 10px
                // font-size: 14px
                // line-height: 20px

.footer
    position: fixed
    bottom: 0px
    width: 100%
    background-color: $primaryColor
    border-top: 1px solid #676767
    .progressBar
        height: 5px
        width: 100%
        background-color: #676767
        @media (min-width: $breakpoint)
            height: 15px
        .progress
            height: 5px
            background-color: $secondaryColor
            @media (min-width: $breakpoint)
                height: 15px
    .currentSong
        display: flex
        flex-direction: row
        height: 60px
        background-color: darken($primaryColor, 20)
        .image
            .thumbnail
                background-size: 100%
                height: 60px
                width: 80px
        .details
            padding: 10px 20px
            font-size: 12px
            color: #fff
            .info
                color: #dedede
    .controls
        display: flex
        flex-direction: row
        padding: 10px 0px
        .buttons
            margin: auto
