/* lib/styles/components/tts_reader_button.css */

.tts-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-paper-white);
    border: 1px solid var(--color-guidance-teal);
    border-radius: var(--radius-full);
    color: var(--color-neutral-navy);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    will-change: transform, background-color, box-shadow;
}

.tts-button:hover {
    background-color: rgba(29, 118, 112, 0.05);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
    /* Subtle lift on hover */
}

.tts-button:active {
    transform: translateY(0);
    /* Active press feedback */
    box-shadow: none;
}

.tts-button:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.tts-button--playing {
    background-color: var(--color-justice-blue);
    border-color: var(--color-justice-blue);
    color: var(--color-white);
}

.tts-button--playing:hover {
    background-color: #152b47;
    /* Darker Justice Blue */
    transform: translateY(-2px);
}

.tts-button__label {
    display: inline-block;
    padding-top: 1px;
    /* Optical alignment for standard sans-serif fonts */
}

/* Optional pulse animation to indicate active reading, slowed down to not distract */
.tts-button--playing .fa-circle-stop {
    animation: tts-pulse 2.5s var(--motion-ease-standard) infinite;
}

@keyframes tts-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
    .tts-button {
        transition: none;
    }

    .tts-button:hover,
    .tts-button--playing:hover {
        transform: none;
    }

    .tts-button--playing .fa-circle-stop {
        animation: none;
    }
}