.voiceSearchButton,
.jobfilterVoice,
.companyfilterVoice {
    width: 55px;
    position: relative;
}

.voiceSearchStatus {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: none;
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--color-darkgray1, #333);
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.voiceSearchStatus--visible {
    display: block;
}

.voiceSearchStatus--info {
    background: var(--color-elvipurple, #6a1b9a);
}

.voiceSearchButton > span,
.jobfilterVoice > span,
.companyfilterVoice > span {
    position: relative;
    z-index: 20;
    display: inline-block;
    border: 1px solid var(--color-gray2);
    border-radius: 50%;
    font-size: 53px;
    transition: color 250ms;
    cursor: pointer;
}

.voiceAnimation {
    transition: all 250ms;
    opacity: 0;
    z-index: 10;
    position: absolute;
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.voiceSearchButton.record .voiceAnimation,
.jobfilterVoice.record .voiceAnimation,
.companyfilterVoice.record .voiceAnimation {
    opacity: 1;
}

.voiceSearchButton .icon-microphone,
.jobfilterVoice .icon-microphone,
.companyfilterVoice .icon-microphone {
    position: relative;
    transition: 250ms color linear;
}

.voiceSearchButton.record .icon-microphone,
.jobfilterVoice.record .icon-microphone,
.companyfilterVoice.record .icon-microphone {
    animation: voiceColor 0.5s 2s linear infinite;
}

@keyframes voiceColor {
    from {
        color: var(--color-elvipurple);
    }
    to {
        color: var(--color-darkgray1);
    }
}

@media (hover: hover) and (pointer: fine) {
    .voiceSearchButton:hover:not(.record) > span,
    .jobfilterVoice:hover:not(.record) > span,
    .companyfilterVoice:hover:not(.record) > span {
        border: 1px solid var(--color-gray2);
        background: var(--color-gray2);
        color: var(--color-light);
    }

    .voiceSearchButton:hover.record > span,
    .jobfilterVoice:hover.record > span,
    .companyfilterVoice:hover.record > span {
        border: 1px solid var(--color-elvipurple);
        color: var(--color-elvipurple);
    }

    .voiceSearchButton:hover .tooltipVoice,
    .jobfilterVoice:hover .tooltipVoice,
    .companyfilterVoice:hover .tooltipVoice {
        opacity: 1;
    }
}