/* =========================================================
   PLAYER VISUALIZER
========================================================= */

.player_visualizer {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: calc(var(--space_6_5) * 3);
    padding: var(--space_2);
    background-color: transparent;
    opacity: .5;
}

    .player_visualizer audio {
        display: none;
    }

    .player_visualizer canvas {
        position: absolute;
        bottom: var(--space_3);
        left: var(--space_2);
        width: calc(100% - var(--space_4));
        height: calc(100% - var(--space_4));
    }


@media only screen and (max-width: 64em) {
    .player.player_fullscreen_open .player_visualizer {
        display: block;
        grid-column: 1;
        grid-row: 4;
        width: 100%;
        height: 20vh;
    }
}