/* Songs list */
.tile-item.song-item:hover,
.tile-item.song-item:active{
    filter: brightness(1.3);
}
.tile-item.song-item{
    position        : relative;
    background-color: var(--bg-content-blend) !important;
    justify-content : left;
    height          : 64px;
    width           : calc( 100% - 32px );
    overflow        : hidden;
    margin-bottom   : 4px;
    border-radius   : 6px;
    background-blend-mode: overlay;
}
.song-list {
    margin-top: 12px;
    padding-bottom: 56px; 
    position: relative;
}

.song-tracknumber {
    font-size: 12px;
    opacity: 0.5;
    display: inline-block;
    height: 100%;
    width: 24px;
    vertical-align: top;
    justify-content: center;
    line-height: 64px;
    padding-left: 8px;
    padding-right: 8px;
}

.song-image {
    width           : 64px;
    background-size : contain;
    height          : 64px;
}
.song-name {
    margin-bottom   : 4px !important;
    font-size       : 16px !important;
    font-weight     : 600;
    overflow        : hidden;
    height          : 20px;
    width           : 100%;
}
.song-art {
    display         : inline-block;
    width           : 64px !important;
    height          : 64px !important;
    border-radius   : 6px;
    overflow        : hidden;
    display         : inline-block;
}

.album-image,
.sidebar-entry-picture,
.placeholder-song-image {
   background: linear-gradient( 35deg, var(--accent-color), var(--link-color), #fff2, #fff0, #fff0), 
                linear-gradient( 80deg, var(--accent-color), var(--link-color), #fff2, #fff0, #fff0), 
                linear-gradient(125deg, var(--accent-color), var(--link-color), #fff2, #fff0, #fff0), 
                linear-gradient(170deg, var(--accent-color), var(--link-color), #fff2, #fff0, #fff0), 
                linear-gradient(215deg, var(--accent-color), var(--link-color), #fff2, #fff0, #fff0), 
                linear-gradient(260deg, var(--accent-color), var(--link-color), #fff2, #fff0, #fff0),
                linear-gradient(305deg, var(--accent-color), var(--link-color), #fff2, #fff0, #fff0),
                linear-gradient(350deg, var(--accent-color), var(--link-color), #fff2, #fff0, #fff0);
 }

.placeholder-song-image {
    width           : 64px !important;
    height          : 64px !important;
    display         : flex;
    align-items     : center;
    justify-content : center;
}
.tile-item.song-item:hover .placeholder-song-image span {
    animation: spinVertical 2s linear infinite;
}

.placeholder-song-image span {
    display: inline-block; /* Necesario para que las transformaciones funcionen */
    /* Mejora la calidad visual del giro */
    backface-visibility: visible;
    font-size   : 48px; 
    line-height : 64px;
    opacity     : 0.5; 
}

/* Definición de la animación en el eje Y */
@keyframes spinVertical {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}


.song-info {
    position:absolute;
    bottom: 4px;
    left: 104px;
    display: inline-block;
    padding-bottom: 4px;
}
.counter {
    bottom  : 4px;
    left    : 4px;
    font-size: 10px;
    color: #feda;
    margin-bottom: 8px;
}

.audio-player-container {
    position: absolute; top: 4px; right: 8px;
    width: 50%
}

.playBtn {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABGCAYAAACaGVmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QThERThENUFDNkJEMTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QThERThENUJDNkJEMTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBOERFOEQ1OEM2QkQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBOERFOEQ1OUM2QkQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnFM7yIAAAFWSURBVHja7NRJDoMwDEDRcPL2ZoVeLEUtCyoCZPBsf8mS10+Wp5zzK6X0XGdJ0bdpRcnbPgfOESUFzjmKe5wrFLc4NSjucFpQ3OD0oJjHGUExiwOBYg4HEsUMDgaKehxMFLU4FCjqcChR1OBwoIjH4UQRiyMBRRyOJBQxOBJR2HEko7DhaEAhx9GEQoajEQUdRzMKGo4FFHAcSyhgOBZRhnEso3TjeEBpxvGEUo3jEeUWxzPKKU6gFHACpYATKMfegbLDWOcRl/Jr2X7JHI+2gOEZ5RTDI8othieUagwPKM0YllG6MSyiDGNYQgHDsIACjqEZBQ1DIwo6hiYUMgwNKOQYklHYMCSisGNIQhGDIQFFHAYnilgMDhTxGJQoajAoUNRhYKKoxcBAUY8BiWIGAwLFHMYIilmMHhTzGC0objBqUNxhXKG4xSihuMfYo8yB8d9HgAEATyefBJWpw70AAAAASUVORK5CYII=');
    background-size: 50% 25%;
    /* filter: invert(); */
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    border: none;
    border-radius: 16px;
    height: 100%;
}
.play-button {
    filter:opacity(0);
    width: 24px;
    height: 64px;
    background-color: transparent;
    position: absolute;
    font-size: 48px;
    line-height: 32px;
    /* mix-blend-mode: difference;  */
    top: 0px;
    border: none;
    color: var(--accent-color);
    left: 0px; 
    cursor: pointer;
}
.song-item:hover .play-button {
    filter: opacity(1);
}
.song-item:hover .song-tracknumber {
    filter: opacity(0);
}

.tile-buttons {
    float: right;
    align-items: center;
    vertical-align: middle;
    height: 100%;
    display: inline-flex;
}
.tile-buttons button {
    margin-right: 6px;
    color: var(--bg-main);
}
.tile-buttons p {
    font-size: 14px;
    margin-right: 16px;
}
#playlists-window {
    display: none;
}
.playlists {
    position: fixed;
    display: inline-block;
    right: 0px;
    bottom: 64px;
    width       : calc( 100% - 436px );
    max-width   : calc( 100% - 436px );
    height      : calc( 100% - 124px );
    max-height  : calc( 100% - 124px );
    background-color: var(--bg-main);
    border-radius: 7px;
    padding: 12px;
    padding-top: 16px;
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
    opacity: .95;
    box-sizing: border-box;
    box-shadow: 0px 4px 0px #0000;
}
/* Picture default color */
.playlist-entry-picture{
    background-color: var(--bg-sidebar);
    margin: 0px;
    margin-right: 8px;
    margin-left: 8px;
    width: 48px !important; 
    height: 48px !important;
    border: none !important;
    background-size: cover !important;
    border-radius: 5px; 
}
.playlists div ul li{
    background-color: var(--bg-main);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    max-height: 48px;
    height: 48px;
    overflow: hidden;
    margin-bottom: 4px;
}
.playlists ul li:hover{
    filter: brightness(1.2);
}
.wrapper {
    padding: 0px;
    margin: 0px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: calc( 100% - 64px);
    box-sizing: border-box;
    overflow: auto;
}

/* OVERRIDES */
.song-info {
    height: 100%;
    bottom: 0px;
    width: calc(100% - 100px);
    overflow: hidden;
    z-index: 0;
}
.song-artist {
    width: calc(100% - 200px);
    height: calc(100% - 20px);
    overflow: hidden;
}
.tile-buttons{
    z-index: 1000;
    position: absolute;
    right: 0px;
}
.tile-item.song-item {
    width: 100%;
}