/* Soft engagement: dots while a metric is still "warming up" */
.soft-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

.soft-count--dots {
    gap: 2px;
    opacity: .62;
    transition: opacity .15s ease;
}

.soft-count--number {
    font-size: inherit;
    color: inherit;
    white-space: nowrap;
}

.soft-count__dot {
    display: block;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.soft-count--md .soft-count__dot {
    width: 6px;
    height: 6px;
}

.soft-count--sm .soft-count__dot {
    width: 5px;
    height: 5px;
}

/* Beat `.story__action span { color: inherit }` */
.story__action .soft-count--like,
.comments__vote .soft-count--like,
.user__comments-vote .soft-count--like {
    color: color-mix(in srgb, var(--color-danger) 52%, transparent);
}

.story__action .soft-count--comment,
.comments__vote .soft-count--comment,
.questions-feed__answers .soft-count--comment {
    color: color-mix(in srgb, var(--color-brand, #3b82c4) 55%, #7eb8d8 20%);
}

.story__action .soft-count--views,
.comments__vote .soft-count--views,
.questions-feed__views .soft-count--views {
    color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
}

.story__action:hover .soft-count--dots,
.story__action:focus-visible .soft-count--dots,
.comments__vote:hover .soft-count--dots,
.comments__vote:focus-visible .soft-count--dots,
.user__comments-vote:hover .soft-count--dots,
.user__comments-vote:focus-visible .soft-count--dots {
    opacity: .85;
}

.story__action--views .soft-count--dots {
    opacity: .55;
}

.story__action--views:hover .soft-count--dots {
    opacity: .75;
}

.comments__vote .soft-count--number,
.user__comments-vote .soft-count--number {
    font-size: .6rem;
}