:root {
    /* The primary UI color. */
    --plyr-color-main: var(--colour-primary-background);
    --plyr-control-radius: 50px;

    --plyr-audio-controls-background: var(--colour-black);
    --plyr-control-spacing: 1em;
    --plyr-audio-range-track-background: var(--colour-primary-text);
    /* The text/icon color for audio controls. */
    --plyr-audio-control-color: var(--colour-primary-text);
}

/* Button colours */
.plyr__control svg {
    fill: var(--colour-secondary-text);
}

.plyr__controls__item,
.plyr__volume .plyr__control {
    &:hover,
    &:focus {
        background: none;
    }
    &:focus {
        transition: none;
        outline: 3px solid white;
    }
}

.plyr--audio {
    margin-block-end: var(--spacing-l-1);
}