:root {
    --player-background: #cfd7ff;
    --player-thumb: #212121;
    --player-track: #ccc;

    --player-playing-shadow: #f887ff;
    --player-playing-border: #ff00ff;
}

.player {
    position: fixed;
    z-index: 1;
    height: 2.5rem;
    min-width: 400px;
    max-width: 550px;
    width: 50vw;
    align-self: center;
    user-select: none;

    bottom: -3rem;
    opacity: 0;
    visibility: hidden;
    transition: bottom .5s ease-in-out, opacity .5s, visibility .5s;
}
.player.active {
    bottom: 0;
    opacity: 1;
    visibility: visible;
}
    .player .controls {
        display: flex;
        align-items: center;
        background-color: var(--player-background);
        border-radius: .5rem .5rem 0 0;
        padding: .2rem 1rem;

        width: 100%;
        height: 100%;
    }
        .player .controls > * {
            margin-left: .5rem;
            margin-right: .5rem;
        }
        .player .controls > *:first-child { margin-left: 0; }
        .player .controls > *:last-child { margin-right: 0; }
        .player .time, .player.duration {
            min-width: 3rem;
        }
        .player .button {
            min-width: 1.3rem;
            min-height: 1.3rem;
            max-width: 1.3rem;
            max-height: 1.3rem;
            width: 1.3rem;
            height: 1.3rem;
            fill: var(--control-enabled);
            transition: fill .15s;
            cursor: pointer;
            display: block;
        }
            .player .button:hover {
                fill: var(--control-selected);
            }
            .player .button.disabled {
                display: none;
            }
    .player .slider {
        outline: none;

        flex: 1;
        min-height: 2rem;
        height: 2rem;
        max-height: 2rem;
        min-width: 4rem;
        display: flex;
        align-items: center;
    }


    .player .bar {
        position: absolute;
        z-index: -9;
        background-color: var(--player-background);
        border-radius: 1rem 1rem 0 0;
        margin: 0;
        display: flex;
        align-items: center;
    }
        .player .bar.active {
            bottom: 2.5rem;
        }

    .player .volume-bar {
        left: 2.85rem;
        width: 2rem;
        height: 6rem;
        padding: .7rem .1rem .3rem .1rem;
        bottom: -3.5rem;

        flex-direction: column;
        transition: bottom .5s ease-in-out;
    }
        .player .volume-bar .volume-slider {
            transform: rotate(270deg);
            min-width: 5rem;
            width: 5rem;
            max-width: 5rem;
            margin-top: 1.5rem;
        }

    .player .speed-bar {
        right: 3.3rem;
        width: 12.25rem;
        height: 2rem;
        padding: .5rem .8rem .2rem .8rem;
        bottom: 0;

        justify-content: center;
        transition: bottom .5s ease-in-out;
    }
        .player .speed-bar .current-speed {
            text-align: right;
            min-width: 3rem; width: 3rem; max-width: 3rem;
            margin-right: .5rem;
        }
        .player .speed-bar .speed-slider {
            margin-right: 1rem;
            min-width: 5rem; width: 5rem; max-width: 5rem;
        }