/* ===========================
   QUEUE V2
=========================== */

.queue-items-container{
    overflow-y:auto;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.queue-heading{
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    color:#94ff80;
    margin:10px 0;
}

.queue-description{
    color:#9ea6a2;
    font-size:14px;
    line-height:1.5;
    margin-bottom:18px;
}

.queue-divider{
    height:1px;
    background:#2d3234;
    margin:10px 0;
}

.queue-current-card{

    display:flex;
    gap:18px;

    padding:18px;

    background:#181c1d;

    border:1px solid rgba(148,255,128,.25);

    border-radius:18px;

    margin-bottom:20px;

}

.queue-cover-large{

    width:80px;
    height:80px;

    border-radius:14px;

    object-fit:cover;

}

.queue-current-info{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.queue-title{

    font-size:20px;

    font-weight:700;

    margin-bottom:6px;

}

.queue-artist{

    color:#9aa3a0;

}

.queue-playing{

    display:flex;

    gap:4px;

    margin-bottom:12px;

}

.queue-playing div{

    width:4px;

    height:18px;

    background:#94ff80;

    border-radius:999px;

    animation:bounce 1s infinite;

}

.queue-playing div:nth-child(2){

    animation-delay:.15s;

}

.queue-playing div:nth-child(3){

    animation-delay:.3s;

}

@keyframes bounce{

0%,100%{

transform:scaleY(.4);

}

50%{

transform:scaleY(1);

}

}

.queue-row{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px;

    border-radius:14px;

    transition:.18s;

    cursor:pointer;

}

.queue-row:hover{

    background:#1f2426;

    transform:translateX(5px);

}

.queue-cover-small{

    width:52px;

    height:52px;

    border-radius:10px;

    object-fit:cover;

}

.queue-song-info{

    flex:1;

    overflow:hidden;

}

.queue-song-title{

    font-weight:700;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.queue-song-artist{

    margin-top:4px;

    color:#9ca5a1;

    font-size:13px;

}

.queue-length{

    color:#8d9693;

    margin-right:12px;

    font-size:14px;

}

.queue-remove{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#25292b;

    color:white;

    border:none;

    transition:.15s;

    cursor:pointer;

}

.queue-remove:hover{

    background:#ff5b76;

}

.queue-random{

    opacity:.65;

}

.queue-random:hover{

    opacity:1;

}

.queue-empty{

    padding:80px 30px;

    text-align:center;

}

.queue-empty h2{

    margin-bottom:10px;

}