.posts-reaction-widget {
  --loader-color: var(--color-2);

  display: flex;
  width: max-content;
  align-items: center;
  gap: 18px;
}
.posts-reaction-widget[data-loading="true"] {
  opacity: 0.5;
  pointer-events: none;
}
.reaction-btn {
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--color);

  display: flex;
  align-items: center;
  gap: 4px;

  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.2s;
}
.reaction-btn:focus {
  outline: none;
}
.reaction-btn:hover,
.reaction-btn[data-active="1"] {
  opacity: 1;
}
.reaction-btn.like {
  --color: var(--color-2);
}
.reaction-btn.dislike {
  --color: var(--color-15);
}
body.theme-light .reaction-btn.like {
  --color: var(--color-13);
}
@keyframes reactionSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}