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

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

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

button.audio-play-button {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.85rem;
    background-color: var(--pico-card-background-color) !important;
    background-image: none !important;
    border: 1px solid var(--pico-muted-border-color) !important;
    border-radius: var(--pico-border-radius);
    color: var(--pico-contrast) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

button.audio-play-button:hover,
button.audio-play-button:focus {
    background-color: var(--pico-card-background-color) !important;
    background-image: none !important;
    border-color: var(--pico-primary) !important;
    color: var(--pico-contrast) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.audio-play-button .play-icon,
.audio-play-button .pause-icon {
    display: flex;
    align-items: center;
}

.audio-play-button .pause-icon {
    display: none;
}

.audio-icon {
    width: 1em;
    height: 1em;
}

.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);
}