[data-topic-id] .interaction-btn .material-icons-round,
[data-topic-id] .topic-action-icon {
    transition: color .15s ease, transform .15s ease;
}

[data-topic-id] .interaction-btn .material-icons-round {
    color: rgb(115 115 115);
}

.dark [data-topic-id] .interaction-btn .material-icons-round {
    color: rgb(148 163 184);
}

[data-topic-id] .interaction-btn:not(.cursor-default):hover .material-icons-round,
[data-topic-id] .interaction-btn:not(.cursor-default):active .material-icons-round {
    transform: translateY(-1px) scale(1.06);
}

[data-topic-id] .interaction-btn-reply:not(.cursor-default):hover .material-icons-round,
[data-topic-id] .interaction-btn-reply.active .material-icons-round {
    color: rgb(59 130 246);
}

[data-topic-id] .interaction-btn-echo:not(.cursor-default):hover .material-icons-round,
[data-topic-id] .interaction-btn-echo.active .material-icons-round {
    color: rgb(34 197 94);
}

[data-topic-id] .interaction-btn-like:not(.cursor-default):hover .material-icons-round,
[data-topic-id] .interaction-btn-like.active .material-icons-round {
    color: rgb(244 63 94);
}

[data-topic-id] .interaction-btn-like.active:not(.cursor-default):hover .material-icons-round,
[data-topic-id] .interaction-btn-like.active:not(.cursor-default):active .material-icons-round,
[data-topic-id] .interaction-btn-echo.active:not(.cursor-default):hover .material-icons-round,
[data-topic-id] .interaction-btn-echo.active:not(.cursor-default):active .material-icons-round {
    transform: translateY(-1px) scale(1.1);
}

[data-topic-id] .interaction-btn.cursor-default .material-icons-round {
    transform: none;
}

[data-topic-id] .topic-action-icon {
    color: rgb(100 116 139);
}

.dark [data-topic-id] .topic-action-icon {
    color: rgb(148 163 184);
}

[data-topic-id] .topic-action-share:hover {
    color: rgb(99 102 241);
    transform: translateY(-1px) scale(1.06);
}

[data-topic-id] .topic-action-bookmark:hover {
    color: rgb(99 102 241);
    transform: translateY(-1px) scale(1.06);
}

[data-topic-id] .topic-action-bookmark.text-primary-500,
[data-topic-id] .topic-action-bookmark[data-bookmarked="true"] {
    color: rgb(99 102 241);
}

.dark [data-topic-id] .topic-action-share:hover,
.dark [data-topic-id] .topic-action-bookmark:hover {
    color: rgb(165 180 252);
}

.dark [data-topic-id] .topic-action-bookmark.text-primary-500,
.dark [data-topic-id] .topic-action-bookmark[data-bookmarked="true"] {
    color: rgb(165 180 252);
}