.o-discuss-Typing-dot {
    background-color: $gray-500;

    .o-discuss-Typing-icon:not(.o-isBrowserSafari) & {
        // Safari bug: some CSS style in foreignobject like opacity / transform / filter reset the position of foreignobject to (0, 0)
        // https://github.com/bkrem/react-d3-tree/issues/284
        // https://bugs.webkit.org/show_bug.cgi?id=23113
        // We disable animation and better contrast in Safari to avoid this bug
        animation: o_mail_Typing_animation 1.5s linear infinite;
        filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, .25));

        &.o-discuss-Typing-dot2 {
            animation-delay: 0.25s;
        }

        &.o-discuss-Typing-dot3 {
            animation-delay: .5s;
        }
    }

    .o-mail-ImStatus &, .o-mail-ThreadIcon & {
        background-color: #fff;
    }

    &.o-sizeMedium {
        width: 4px;
        height: 4px;
    }

    &.o-sizeSmall {
        width: 3px;
        height: 3px;
    }
}

.o-discuss-Typing-icon {
    padding: 1px 0px;
    gap: 1px;
}

@keyframes o_mail_Typing_animation {
    0%, 25%, 75% {
        opacity: initial;
        transform: scale(1);
        filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, .15));
    }
    50% {
        opacity: 75%;
        transform: scale(.85) translateY(-1px);
        filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .15));
    }
}

.o-mail-DiscussContent .o-discuss-Typing {
    transform: translateY(-85%);
    padding-left: calc(#{$o-mail-Message-sidebarWidth} + #{map-get($spacers, 2)});
}