.p_a2_speechRecognition {
    cursor: pointer;
    position: relative;
    display: none;
    width: 40px;
    height: 40px;
}

.speechRecognition {
    position: relative;
    cursor: pointer;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.p_a2_speechRecognition::before {
    top: 0;
    left: 0;
    position: absolute;
    content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSIiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDE2YzIuMjA2IDAgNC0xLjc5NSA0LTR2LTZjMC0yLjIwNi0xLjc5NC00LTQtNHMtNCAxLjc5NC00IDR2NmMwIDIuMjA1IDEuNzk0IDQgNCA0ek0xOSAxMnYtMmMwLS41NTItLjQ0Ny0xLTEtMXMtMSAuNDQ4LTEgMXYyYzAgMi43NTctMi4yNDMgNS01IDVzLTUtMi4yNDMtNS01di0yYzAtLjU1Mi0uNDQ3LTEtMS0xcy0xIC40NDgtMSAxdjJjMCAzLjUyIDIuNjEzIDYuNDMyIDYgNi45MnYxLjA4aC0zYy0uNTUzIDAtMSAuNDQ3LTEgMXMuNDQ3IDEgMSAxaDhjLjU1MyAwIDEtLjQ0NyAxLTFzLS40NDctMS0xLTFoLTN2LTEuMDhjMy4zODctLjQ4OCA2LTMuNCA2LTYuOTJ6IiBmaWxsPSIjNzc3Nzc3Ij48L3BhdGg+PC9zdmc+);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.p_a2_speechRecognition:hover::before {
    filter: brightness(.7);
}

.p_a2_speechRecognition--active {
    filter: brightness(1.5);
}

.p_a2_speechRecognition--active::after {
    top: 0;
    content: '•';
    position: absolute;
    color: var(--ui-color-accent);
    animation: 1s scale infinite alternate-reverse;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes scale {
    from {
        transform: scale(2);
    }

    50% {
        transform: scale(1);
    }

    to {
        transform: scale(2);
    }

}