/* modification of https://codepen.io/arthak/pen/rmqvgo */

.typing-indicator-bubble {
    align-items: center;
    display: flex;
    height: 1.8rem;
    width: 2.8rem;
    background-color: lightgray;
    border-radius: 1.2rem 1.2rem 1.2rem 0rem;
    padding-left: 1rem;
}

.typing-indicator-dot {
    background-color: #90949c;
}

.typing-indicator-dot {
    -webkit-animation: mercuryTypingAnimation 1.5s infinite ease-in-out;
    animation: mercuryTypingAnimation 1.5s infinite ease-in-out;
    border-radius: 0.25rem;
    display: inline-block;
    height: 0.5rem;
    margin-right: 0.25rem;
    width: 0.5rem;
}

@keyframes mercuryTypingAnimation{
    0%{
        -webkit-transform:translateY(0rem)
    }
    28%{
        -webkit-transform:translateY(-0.25rem)
    }
    44%{
        -webkit-transform:translateY(0rem)
    }
}

.typing-indicator-dot:nth-child(1){
    -webkit-animation-delay:200ms;
    animation-delay:200ms;
}
.typing-indicator-dot:nth-child(2){
    -webkit-animation-delay:300ms;
    animation-delay:300ms;
}
.typing-indicator-dot:nth-child(3){
    -webkit-animation-delay:400ms;
    animation-delay:400ms;
}