/*
 * Audio Styles
 * Audio player controls, verse highlighting
 */

/* ==========================================================================
   Audio Player Controls
   ========================================================================== */

.audio-player-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.audio-play-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    background: var(--pico-secondary-background);
    border: 1px solid var(--pico-secondary-border-color);
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.audio-play-button:hover {
    background: var(--pico-secondary-hover-background);
}

.audio-play-button .play-icon,
.audio-play-button .pause-icon {
    font-size: 0.75rem;
}

.audio-play-button .pause-icon {
    display: none;
    letter-spacing: -0.15em;
}

.audio-play-button[data-playing="true"] .play-icon {
    display: none;
}

.audio-play-button[data-playing="true"] .pause-icon {
    display: inline;
}

.audio-play-button .button-text-playing {
    display: none;
}

.audio-play-button[data-playing="true"] .button-text-idle {
    display: none;
}

.audio-play-button[data-playing="true"] .button-text-playing {
    display: inline;
}

/* Hide the audio element */
.audio-player-controls audio {
    display: none;
}

/* ==========================================================================
   Verse Highlighting (Audio Playback)
   ========================================================================== */

/* Clickable verses when audio is available */
[data-controller="audio-player"] [data-audio-player-target="verse"] {
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-radius: var(--pico-border-radius);
    margin-left: -0.35rem;
    margin-right: -0.35rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

[data-controller="audio-player"] [data-audio-player-target="verse"]:hover {
    background-color: rgba(128, 128, 128, 0.08);
}

/* Currently playing verse */
[data-audio-player-target="verse"].audio-playing {
    background-color: rgba(255, 200, 0, 0.15);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] [data-audio-player-target="verse"].audio-playing {
        background-color: rgba(255, 200, 0, 0.12);
    }

    html[data-theme="auto"] [data-controller="audio-player"] [data-audio-player-target="verse"]:hover {
        background-color: rgba(200, 200, 200, 0.08);
    }
}

html[data-theme="dark"] [data-audio-player-target="verse"].audio-playing {
    background-color: rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] [data-controller="audio-player"] [data-audio-player-target="verse"]:hover {
    background-color: rgba(200, 200, 200, 0.08);
}