{% macro audio_player() %}
<style>
    #audio-section {
        margin-top: 10%;
    }

    #audio-title {
        font-size: 1.2em;
        color: var(--song-title-color); /* Assumes --song-title-color is defined globally */
    }

    .audio-progress-bar {
        height: 10px;
        width: 100%;
        margin-top: 3%; 
        cursor: pointer;
        appearance: none; 
        border: none;
        border-radius: 4px;
        overflow: hidden; 
    }

    .audio-progress-bar::-webkit-progress-bar {
        background-color: var(--progress-bar-track); /* Assumes --progress-bar-track is defined globally */
        border-radius: 4px;
    }

    .audio-progress-bar::-webkit-progress-value {
        background-color: var(--progress-bar-fill); /* Assumes --progress-bar-fill is defined globally */
        border-radius: 4px;
        transition: background-color 0.2s ease-in-out;
    }

    .audio-progress-bar::-moz-progress-bar {
        background-color: var(--progress-bar-fill); /* Assumes --progress-bar-fill is defined globally */
        border-radius: 4px;
        transition: background-color 0.2s ease-in-out;
    }

    .time-display {
        display: flex;
        justify-content: space-between;
        width: 100%; 
        margin-top: 5px;
        font-size: 1em;
        color: var(--time-display-color); /* Assumes --time-display-color is defined globally */
    }

    .current-time,
    .total-duration {
        font-family: monospace; 
    }

    .play-pause-btn {
        margin: 0 auto;
        display: block;
        font-size: 1.6em; 
        font-family: monospace;
        cursor: pointer;
        background-color: transparent; 
        color: var(--play-pause-color); /* Assumes --play-pause-color is defined globally */
        border: none;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .play-pause-btn:hover {
        color: var(--play-pause-hover-color); /* Assumes --play-pause-hover-color is defined globally */
    }
</style>
<div id="audio-section" style="display: none;">
    <a id="audio-title" href="#" target="_blank" rel="noopener noreferrer"></a>                    
    <progress id="audio-progress" class="audio-progress-bar"></progress>
    <div id="time-container" class="time-display">
        <span id="current-time" class="current-time">--:--</span>
        <span id="total-duration" class="total-duration">--:--</span>
    </div>
    <button id="play-pause-button" class="play-pause-btn">▶</button>
</div>
<script src="/scripts/audio_player.js" defer></script>
{% endmacro %}