.root {
    --status-token-color: var(--mantine-primary-color-filled);
    --status-token-size: 12px;

    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    width: var(--status-token-size);
    height: var(--status-token-size);
    color: var(--status-token-color);

    &:where([data-variant='waiting']) {
        position: relative;

        &::before {
            position: absolute;
            z-index: -1;
            background-color: var(--status-token-color);
            border-radius: 100%;
            animation: pulse 1000ms linear infinite;
            content: '';
            inset: 0;
        }
    }

    svg {
        width: var(--status-token-size);
        height: var(--status-token-size);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }

    100% {
        transform: scale(2.8);
        opacity: 0;
    }
}