@import '@servicetitan/tokens/dist/tokens.less';

.dotsContainer {
    @keyframes dot-jumping {
        0% {
            transform: translateY(0);
        }
        16.6666% {
            transform: translateY(-6px);
        }
        33.3333% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(0);
        }
    }

    & .dot {
        width: 6px;
        height: 6px;
        margin: @spacing-0 2px;
        background-color: @color-neutral-80;
        border-radius: @border-radius-circular;
        display: inline-block;
        animation: dot-jumping 1.5s infinite ease-in-out;
    }

    & .dot:nth-child(1) {
        animation-delay: 0s;
    }

    & .dot:nth-child(2) {
        animation-delay: 0.5s;
    }

    & .dot:nth-child(3) {
        animation-delay: 1s;
    }
}