﻿.player {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--space_2);
}

    .player #sideRPlayerBackground {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
        opacity: 0.10;
        pointer-events: none;
    }

@media only screen and (max-width: 64em) {
    .player {
        position: fixed;
        top: 80vh;
        left: 0;
        width: 100%;
        height: 20vh;
        transition: top .4s, height .4s;
    }

    .player.player_fullscreen_open {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        padding-left: var(--shell_side_L);
        box-sizing: border-box;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 22vw auto minmax(0, 1fr);
        grid-auto-flow: row;
        background-color: var(--color_White);
    }
}

@media only screen and (max-width: 48em) {

    .player.player_fullscreen_open {
        padding-top: var(--space_10);
        padding-left: 0;
        display: grid;
        grid-template-columns: 1fr;
        /* NOW | NAVIGATION | LYRICS | VISUALIZER */
        grid-template-rows: 35vw auto minmax(0, 1fr) 20vh;
    }
}
