/*
 * Custom styles for the TTA (Text To Audio) plugin button.
 *
 * These styles are automatically injected into the plugin via the
 * tta_override_custom_css() function located in:
 * inc/text-to-audio.php
 *
 * This file is version-controlled and overrides the plugin’s “Custom CSS” admin setting.
 */


 /* Targets the button inside the component */
 #tts__listent_content_1.tts__listent_content,
 #tts__listent_content_1.tts__listent_content:hover {
     height: auto;
     justify-content: flex-start;
     background: none !important;
     font-family: 'Poppins', sans-serif;
     padding: 0 !important;
     color: #000000 !important;
}
     

/* Targets the icon wrapper: Plugin incorrectly uses classname and cannot select by class */
#tts__listent_content_1.tts__listent_content .tts-button-left::before {
    display: inline-block;
    padding: 1rem;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='36' height='37' viewBox='0 0 36 37' fill='none' xmlns='http://www.w3.org/2000/svg' class='icon icon-listen'%3E%3Cg clip-path='url(%23clip0_219_23917)'%3E%3Cpath d='M25.7114 26.9894V24.288C27.7121 23.5684 29.5016 22.2555 31.0673 20.3746C32.6331 18.4811 33.4284 16.1962 33.4284 13.4947C33.4284 10.7932 32.6455 8.50836 31.0673 6.61481C29.4891 4.72126 27.7121 3.42102 25.7114 2.70147V0C28.6193 0.782668 31.0673 2.41112 33.0432 4.89799C35.019 7.38485 36.0007 10.2504 36.0007 13.4947C36.0007 16.739 35.019 19.6172 33.0432 22.0914C31.0673 24.5783 28.6317 26.2068 25.7114 26.9894ZM25.7114 20.8038V5.74377C27.3145 6.34971 28.5696 7.42272 29.4767 8.96281C30.3963 10.5029 30.8437 12.0051 30.8437 13.4947C30.8437 14.9843 30.3466 16.436 29.34 17.8878C28.3335 19.3395 27.1281 20.3115 25.699 20.8038M23.1267 24.8055L16.2672 17.8373H10.2651V9.13954H16.2672L23.1391 2.17127V24.8055H23.1267ZM6.84779 21.7632H15.4222V24.3763H6.86022V21.7632H6.84779ZM6.84779 26.9894H18.8519V29.6025H6.86022V26.9894H6.84779ZM2.5606 37C1.85228 37 1.24337 36.7475 0.746307 36.23C0.249241 35.7124 -0.0117188 35.1064 -0.0117188 34.3869V4.78437C-0.0117188 4.06482 0.236814 3.44626 0.746307 2.94132C1.24337 2.42375 1.85228 2.17127 2.5606 2.17127H18.8519L16.2796 4.78437H2.57302V34.3869H23.1391V28.2897H25.7114V34.3869C25.7114 35.1064 25.4629 35.725 24.9534 36.23C24.4439 36.7349 23.8474 37 23.1391 37H2.57302H2.5606Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_219_23917'%3E%3Crect width='36' height='37' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 57% 50%;
    background-size: 47%;
    width: 68px;
    height: 68px;
}

#tts__listent_content_1.tts__listent_content:hover .tts-button-left::before,
#tts__listent_content_1.tts__listent_content:focus .tts-button-left::before {  
    background-color: #dce2e6;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .25);
}

/* Targets the text of the button: Plugin does not include a class for the text of the button */
#tts__listent_content_1.tts__listent_content .tts-button-left > span {
    color: #000000;
    display: inline-block;
    vertical-align: top;
    margin-left: 1rem;
    font-size: var(--wp--custom--body-sizes--mobile);
}



.tta__listent_content:hover .tts-button-left > span {
    text-decoration: underline;
}

@media screen and (min-width: 1200px) {
    #tts__listent_content_1.tts__listent_content .tts-button-left svg {
        width: 2.25rem;
        height: 2.25rem;
        background-position: 57% 50%;
        background-size: 49%;
    }
    #tts__listent_content_1.tts__listent_content .tts-button-left > span {
        font-size: var(--wp--custom--body-sizes--desktop);
    }
}

#tts__listent_content_1.tts__listent_content svg {
    display: none;
    padding-right: 7px !important;
    padding-top: 5px;
}

#tts__listent_content_1.tts__listent_content .tts-button-left {
    gap: 0 !important;
}