.media-item.is-audio {
    padding: var(--big-marge);
}

.custom-audio-player {
    width: 100%;
}

.player-top {
    display: flex;
    align-items: start;
    flex-direction: row;
    background-color: var(--background);
    padding: var(--small-marge) 0 var(--medium-marge) 0;
}

.player-top-controls {
    min-width: var(--col);
    width: auto;
    display: flex;
    align-items: center;
    padding-right: var(--big-marge);
}

/* Bouton Play/Pause (SVG recolorables) */
.play-pause {
    height: 0.9em;
    width: 0.9em;
    border: none;
    cursor: pointer;
    background-color: var(--primary);
    mask: url('../img/bouton-play.svg') no-repeat center;
    -webkit-mask: url('../img/bouton-play.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;

    margin-right: var(--big-marge);
}

.play-pause.is-playing {
    mask-image: url('../img/bouton-pause.svg');
    -webkit-mask-image: url('../img/bouton-pause.svg');
}


.player-bottom {
    background-color: var(--background);
    height: 2.2em;
    border-bottom: var(--white-border);
}

.progress-bar {
    position: relative;
    height: 100%;
    cursor: pointer;
    mix-blend-mode: difference;
}

.progress-fill {
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--primary);
    transition: width 0.1s linear;
}

.time-info {
    display: flex;
    justify-content: space-between;
    font-size: var(--fontsize-small);
    position: absolute;
    width: calc(100% - calc(var(--big-marge) * 2));
    height: 2.6em;
    align-items: end;
    padding: var(--small-marge);
    mix-blend-mode: difference;
}

@media (max-width: 768px) {
    .media-item.is-audio {
        padding: 0;
        margin-bottom: 1em;
    }

    .custom-audio-player {
        font-size: var(--fontsize-small);
    }

    .player-top {
        padding: var(--small-marge) var(--small-marge) var(--medium-marge) var(--small-marge);
    }

    .player-bottom {
        height: 3em;
    }

    .time-info {
        width: 100%;
        height: 3em;
        padding: var(--small-marge);
    }
}