/* =========================================================
   PLAYER LIST / PLAYLISTS
========================================================= */
.player_list {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: var(--space_2);
    overflow: hidden;
    transform: translateX(103%);
    transition: transform 200ms ease;
    /**/
    background-color: rgba(146, 178, 203, 0.95);
    /**/
}

.player_list_open {
    transform: translateX(0);
}

.player_list_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: var(--space_2);
    border-bottom: var(--space_0_25) solid var(--color_LunarGreen);
}

    .player_list_header span {
        font-family: var(--font_BovinoMedium);
    }

.player_list .player_playlist {
    width: 100%;
    height: calc(100% - var(--space_10));
    overflow-y: scroll;
    overflow-x: hidden;
    /* Firefox */
    scrollbar-width: none;
    /* IE in stari Edge */
    -ms-overflow-style: none;
}

.player_list .player_playlist::-webkit-scrollbar {
    display: none;
}

.player_playlist_item {
    display: flex;
    align-items: center;
    inline-size: 100%;
    gap: var(--space_2);
    padding-block: var(--space_1);
    border-block-end: var(--space_0_25) solid var(--color_LunarGreen);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .player_playlist_item:hover {
        background: color-mix( in srgb, var(--color_LunarGreen) 12%, transparent );
    }

    .player_playlist_item span {
        display: none;
    }

.player_playlist_index {
    display: none;
}

.player_playlist_image {
    flex: 0 0 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .player_playlist_image img {
        inline-size: var(--space_5);
        block-size: auto;
        display: block;
        object-fit: contain;
    }

.player_playlist_name {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    font-family: var(--font_BovinoMedium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player_tracks {
    width: 100%;
    display: block;
    height: calc(100% - var(--space_10));
    overflow-y: scroll;
    overflow-x: hidden;
    /* Firefox */
    scrollbar-width: none;
    /* IE in stari Edge */
    -ms-overflow-style: none;
    padding-bottom: var(--space_20)
}

    .player_tracks::-webkit-scrollbar {
        display: none;
    }

.player_track_item {
    display: flex;
    align-items: center;
    inline-size: 100%;
    gap: var(--space_2);
    padding-block: var(--space_1);
    border-block-end: var(--space_0_25) solid var(--color_LunarGreen);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .player_track_item:hover {
        background: color-mix( in srgb, var(--color_LunarGreen) 12%, transparent );
    }

    .player_track_item::-webkit-scrollbar {
        display: none;
    }

.player_track_index {
    display: none;
}

.player_track_image {
    flex: 0 0 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .player_track_image img {
        inline-size: clamp(var(--space_4_75), 4vw, var(--space_6_5));
        block-size: auto;
        display: block;
        object-fit: contain;
    }

.player_track_name {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    font-family: var(--font_BovinoMedium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player_track_search {
    display: flex;
    align-items: center;
    gap: var(--space_2);
    margin: var(--space_3) 0;
    padding: var(--space_2) var(--space_2);
    background: rgba(255,255,255,.35);
    border: var(--space_0_25) solid rgba(60,80,65,.25);
    border-radius: 8px;
}

    .player_track_search .svg_icon {
        inline-size: var(--space_4);
        block-size: var(--space_4);
        opacity: .7;
        flex: 0 0 auto;
    }

#sideRTrackListSearch {
    inline-size: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: var(--color_LunarGreen);
}

    #sideRTrackListSearch::placeholder {
        color: rgba(50,65,50,.65);
    }


@media only screen and (max-width: 64em) and (min-width: 48.1em) {
    .player_list_open {
        display: block;
        position: fixed;
        inset: 0;
        left: var(--shell_side_L);
        width: calc(100vw - var(--shell_side_L));
        height: 80dvh;
        padding-top: var(--space_10);
        transform: translateX(0);
        z-index: 201;
        overflow: hidden;
    }
}

@media only screen and (max-width: 48em) {
    .player_list_open {
        display: block;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        padding-top: var(--space_10);
        transform: translateX(0);
        overflow: hidden;
    }
}