/* Recolors abcjs's audio controls (assets/style/abcjs-audio.css) to
   follow the site's active color theme instead of abcjs's own fixed
   dark palette. Layout/sizing rules are left to the vendored file;
   this only overrides color-related declarations. */

.abcjs-inline-audio {
    background-color: var(--button-background);
    border-radius: var(--nice-border-radius);
    height: 39px;
    box-sizing: border-box;
}

.abcjs-btn g {
    fill: var(--button-text-color);
    stroke: var(--button-text-color);
}

.abcjs-inline-audio .abcjs-btn:hover g {
    fill: var(--text-color);
    stroke: var(--text-color);
}

.abcjs-inline-audio .abcjs-midi-selection.abcjs-pushed,
.abcjs-inline-audio .abcjs-midi-loop.abcjs-pushed,
.abcjs-inline-audio .abcjs-midi-reset.abcjs-pushed {
    border-color: var(--button-text-color);
    background-color: var(--hover-button-background);
}

.abcjs-inline-audio .abcjs-midi-progress-background {
    background-color: var(--color-five);
    border-color: var(--button-text-color);
}

.abcjs-inline-audio .abcjs-midi-progress-indicator {
    background-color: var(--button-text-color);
}

.abcjs-inline-audio .abcjs-midi-clock {
    color: var(--button-text-color);
    font-family: var(--font-main);
}

.abcjs-inline-audio .abcjs-tempo-wrapper {
    color: var(--button-text-color);
}

.abcjs-inline-audio .abcjs-loading-svg circle {
    stroke: var(--button-text-color);
}