/* public/app/css/dash-tts-player.css
 * Synopsis: Barre lecteur audio TTS.
 * Objectif: Progress, temps, stop et download inline.
 */

.tts-player { display: flex; flex-direction: column; gap: .25rem; padding: .35rem 0 0; }
.tts-player[hidden] { display: none; }

.tts-player__status {
    color: var(--dash-accent);
    font-size: .78rem;
    letter-spacing: .02em;
    line-height: 1.3;
}

.tts-player__track { align-items: center; display: flex; gap: .45rem; }

.tts-player__progress {
    appearance: none;
    background: color-mix(in srgb, var(--dash-text) 15%, transparent);
    border: none;
    border-radius: 3px;
    flex: 1 1 0;
    height: 6px;
}

.tts-player__progress::-webkit-progress-bar {
    background: color-mix(in srgb, var(--dash-text) 15%, transparent);
    border-radius: 3px;
}

.tts-player__progress::-webkit-progress-value {
    background: var(--dash-accent);
    border-radius: 3px;
    transition: width .15s linear;
}

.tts-player__progress::-moz-progress-bar {
    background: var(--dash-accent);
    border-radius: 3px;
}

.tts-player__time {
    color: var(--dash-text);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    min-width: 5.8rem;
    text-align: center;
    white-space: nowrap;
}

.tts-player__stop,
.tts-player__dl {
    background: none;
    border: 1px solid color-mix(in srgb, var(--dash-text) 30%, transparent);
    border-radius: 4px;
    color: var(--dash-text);
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    padding: .25rem .4rem;
}

.tts-player__stop:hover,
.tts-player__dl:hover {
    border-color: var(--dash-accent);
    color: var(--dash-accent);
}

.tts-player__dl {
    border-color: color-mix(in srgb, var(--dash-accent) 50%, transparent);
    color: var(--dash-accent);
}

.tts-player__dl:hover {
    background: color-mix(in srgb, var(--dash-accent) 12%, transparent);
}

.tts-player__stop[hidden],
.tts-player__dl[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .tts-player__progress::-webkit-progress-value { transition: none; }
}