@import "./_variables"

.container
    position: absolute
    bottom: 0
    left: 0
    margin: 10px
    display: inline-flex
    align-items: center
    max-width: 50rem
    background: $background-dark-lanyard
    color: $text-dark-lanyard
    &[data-theme="light"]
        background: $background-light-lanyard
        color: $text-light-lanyard

.albumart
    border-radius: 20px
    padding: 10px !important

.artist_song
    line-height: .5rem
    padding-left: 1rem
    padding-right: 1rem
    .artist
        font-size: .8rem

.badge:after
    content: ''
    position: absolute
    top: -5px
    right: -5px
    font-size: .7em
    background: #8cff96b4
    color: white
    width: 18px
    height: 18px
    text-align: center
    line-height: 18px
    border-radius: 50%
        // box-shadow: 0 0 1px #333
    animation: pulse 4s linear infinite alternate

@keyframes pulse
    0%
        transform: scale(1)
    50%
        transform: scale(1.4)
    100%
        transform: scale(1)

@keyframes skeleton-loading
    0%
        background-color: #191919

    100%
        background-color: #222

.np_mobile
    position: absolute
    top: 0
    left: 0
    width: 100%
    text-align: center
    background: $background-dark-lanyard
    color: $text-dark-lanyard
    &[data-theme="light"]
        background: $background-light-lanyard
        color: $text-light-lanyard

.np_icon
    align-content: center
    translate: trans
    transform-origin: center center
    animation: load 5s infinite cubic-bezier(0.81,-0.73, 0.32, 1.28)

@keyframes load
    0%
        rotate: 0deg
    100%
        rotate: 360deg