/* ============================================================
   Sicrop Radio
   Queue
   ============================================================ */

#queue {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 12px;

    overflow-y: auto;

    overflow-x: hidden;

    min-height: 0;

    padding-right: 4px;

}

/* ------------------------------------------------------------
   Scrollbar
   ------------------------------------------------------------ */

#queue::-webkit-scrollbar {

    width: 8px;

}

#queue::-webkit-scrollbar-track {

    background: transparent;

}

#queue::-webkit-scrollbar-thumb {

    background: rgba(255,255,255,.18);

    border-radius: 10px;

}

#queue::-webkit-scrollbar-thumb:hover {

    background: rgba(255,255,255,.35);

}

/* ------------------------------------------------------------
   Queue Item
   ------------------------------------------------------------ */

.queue-item {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 10px;

    border-radius: 14px;

    background: rgba(255,255,255,.035);

    border: 1px solid rgba(255,255,255,.05);

    transition:
        background .25s,
        border-color .25s,
        transform .2s;

}

.queue-item:hover {

    background: rgba(255,255,255,.07);

    border-color: rgba(255,255,255,.12);

    transform: translateX(3px);

}

/* ------------------------------------------------------------
   Cover
   ------------------------------------------------------------ */

.queue-cover {

    width: 58px;

    height: 58px;

    flex: 0 0 58px;

    border-radius: 10px;

    overflow: hidden;

    background: #1d1d1d;

}

.queue-cover-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

/* ------------------------------------------------------------
   Meta
   ------------------------------------------------------------ */

.queue-meta {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.queue-title {

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.25;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.queue-artist {

    color: rgba(255,255,255,.62);

    font-size: 13px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

/* ------------------------------------------------------------
   Duration
   ------------------------------------------------------------ */

.queue-duration {

    flex: 0 0 auto;

    font-size: 13px;

    color: rgba(255,255,255,.55);

    font-variant-numeric: tabular-nums;

    padding-left: 10px;

}

/* ------------------------------------------------------------
   Future states
   ------------------------------------------------------------ */

.queue-item.active {

    border-color: #4fc3ff;

    box-shadow: 0 0 18px rgba(79,195,255,.22);

}

.queue-item.next {

    border-color: rgba(255,255,255,.18);

}