RocketChat/Rocket.Chat

@import '../../../styles/colors';
@import '../../../styles/helpers';
@import '../../../styles/variables';

$typing-dots-dot-size: 8px;
$typing-dots-dot-margin: 0 2px;
$typing-dots-dot-color: $color-text-grey;
$typing-dots-dot-highlight-color: $bg-color-grey;
$typing-dots-dot-animation-time: 3 * $default-time-animation;
$typing-dots-dot-animation-delay-gap: $default-time-animation;

.typing-dots {
    text-align: center;

    &__dot {
        display: inline-block;

        width: $typing-dots-dot-size;
        height: $typing-dots-dot-size;
        margin: $typing-dots-dot-margin;

        animation: typing-dots__indicator $typing-dots-dot-animation-time infinite alternate;
        vertical-align: middle;

        border-radius: 50%;
        background-color: $typing-dots-dot-color;

        &:nth-of-type(2) {
            animation-delay: $typing-dots-dot-animation-delay-gap;
        }

        &:nth-of-type(3) {
            animation-delay: (2 * $typing-dots-dot-animation-delay-gap);
        }
    }
}

@include keyframes('typing-dots__indicator') {
    0% {
        background-color: $typing-dots-dot-color;
    }

    100% {
        background: $typing-dots-dot-highlight-color;
    }
}