/* ==================   NOW PLAYING    ========== */

.player_now {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-shrink: 0;
}

.player_cover {
    width: 30%;
}

    .player_cover img {
        width: 100%;
    }

.player_info {
    width: 60%;
    padding-left: var(--space_2);
}

.player_info_group label h5 {
    padding-bottom: var(--space_2);
}

.player_icons {
    width: 10%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

    .player_icons > button {
        position: relative;
        flex: 0 0 auto;
    }

.player_title h4,
.player_now .player_playlist h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.player_open_list {
    position: absolute;
    top: var(--space_2);
    right: 0;
}

@media only screen and (max-width: 64em) {

    .player_now {
        height: var(--shell_side_L);
    }

    /* COVER */
    .player_cover {
        padding-top: var(--space_2);
        flex: 0 0 calc(var(--shell_side_L) - var(--space_4));
        width: calc(var(--shell_side_L) - var(--space_4));
        height: calc(var(--shell_side_L) - var(--space_4));
        min-width: calc(var(--shell_side_L) - var(--space_4));
        min-height: calc(var(--shell_side_L) - var(--space_4));
    }

        .player_cover img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    /* INFO */
    .player_info {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

        .player_info .player_info_group {
            flex: 0 0 auto;
            min-width: 0;
            min-height: 0;
            overflow: visible;
            padding: var(--space_1);
        }

            .player_info .player_info_group:has(.player_playlist) {
                padding-top: 0;
            }

    .player_info_group > label {
        display: none;
    }

    .player_info .player_title,
    .player_now .player_playlist {
        width: 100%;
        min-width: 0;
        height: auto;
        overflow: visible;
    }

        .player_info .player_title h4,
        .player_now .player_playlist h4 {
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        .player_info .player_title h4 {
            font-size: var(--font_size_40);
            line-height: 1.1;
            font-weight: 600;
            -webkit-line-clamp: 1;
        }

        .player_now .player_playlist h4 {
            font-size: var(--font_size_32);
            line-height: 1.15;
            font-weight: 500;
            -webkit-line-clamp: 2;
        }


    .player_icons {
        grid-column: 3;
        grid-row: 1 / 4;
        width: 10%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border-left: 1px solid var(--color_LunarGreen);
        padding: var(--space_1) 0;
        padding-bottom: var(--space_4);
        flex: 0 0 10%;
        min-width: 10%;
        max-width: 10%;
    }

        .player_icons > button,
        .player_open_list {
            position: static;
        }

    .player_open_list {
        position: static;
        top: auto;
        right: auto;
    }


    .player_controls {
        grid-column: 1 / 3;
        grid-row: 2;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        min-width: 0;
    }

    /* volume na small ven */
    .player_volume,
    #sideRMute {
        display: none;
    }

    /* PROGRESS */
    .player_progress {
        grid-column: 1 / 3;
        grid-row: 3;
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        align-items: center;
        gap: var(--space_2);
        width: 100%;
        min-width: 0;
        padding: var(--space_2) var(--space_3) var(--space_3);
    }

    .player_seek,
    .player_seek input {
        width: 100%;
        min-width: 0;
    }

    .player.player_fullscreen_open .player_now {
        display: grid;
        grid-template-columns: 22vw minmax(0, 1fr) 10%;
        grid-template-rows: max-content;
        width: 100%;
        height: 30vw;
        min-height: 0;
        padding-top: 0;
        align-items: start;
    }

    .player.player_fullscreen_open .player_cover {
        grid-column: 1;
        grid-row: 1;
        width: 22vw;
        height: 22vw;
        overflow: hidden;
    }

        .player.player_fullscreen_open .player_cover img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    /* ================= FULLSCREEN ================= */
    .player.player_fullscreen_open .player_now {
        display: grid;
        grid-template-columns: 22vw minmax(0, 1fr) 10%;
        grid-template-rows: 22vw;
        width: 100%;
        height: 22vw;
        min-height: 0;
        overflow: hidden;
        align-items: start;
    }

    .player.player_fullscreen_open .player_cover {
        grid-column: 1;
        grid-row: 1;
        width: 22vw;
        height: 22vw;
        aspect-ratio: 1 / 1;
        align-self: start;
    }

    .player.player_fullscreen_open .player_info {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        height: auto;
        min-width: 0;
        align-self: start;
        padding-left: var(--space_8);
        padding-top: var(--space_1);
    }

        .player.player_fullscreen_open .player_info .player_title h4 {
            font-size: var(--font_size_40);
            line-height: 1.1;
            font-weight: 600;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: normal;
            overflow: visible;
            text-overflow: clip;
            display: block;
            -webkit-line-clamp: unset;
            -webkit-box-orient: unset;
        }

    .player.player_fullscreen_open .player_icons {
        grid-column: 3;
        grid-row: 1 / 4;
        width: 100%;
        height: 100%;
        min-width: 0;
        max-width: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border-left: 1px solid var(--color_LunarGreen);
        padding: var(--space_1) 0;
        padding-bottom: var(--space_4);
        flex: none;
    }
}
@media only screen and (max-width: 48em) {

    .player_now {
        height: 100%;
    }

    .player_cover {
        flex: 0 0 22vw;
        height: 22vw;
        width: 22vw;
        min-width: 22vw;
        min-height: 22vw;
        aspect-ratio: 1 / 1;
    }

    .player_info .player_title h4 {
        font-size: var(--font_size_24);
    }

    .player_now .player_playlist h4 {
        font-size: var(--font_size_16);
    }

    .player.player_fullscreen_open .player_now {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }


        .player.player_fullscreen_open .player_cover {
            grid-column: 1;
            grid-row: 1;
            width: 100%;
            height: 100%;
            align-self: start;
            overflow: hidden;
        }

            .player.player_fullscreen_open .player_cover img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .player.player_fullscreen_open .player_info {
            grid-column: 2;
            grid-row: 1;
            height: 100%;
            align-self: stretch;
        }

            .player.player_fullscreen_open .player_info .player_title h4 {
                font-size: var(--font_size_24);
                line-height: 1.1;
                font-weight: 600;
                -webkit-line-clamp: 1;
            }

        .player.player_fullscreen_open .player_now .player_playlist h4 {
            font-size: var(--font_size_16);
            line-height: 1.15;
            font-weight: 500;
            -webkit-line-clamp: 2;
        }

        .player.player_fullscreen_open .player_icons {
            grid-column: 3;
            grid-row: 1;
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space_2);
            align-self: start;
        }
    }