.df-reaction-trigger > span {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.df-reaction-trigger > span:hover {
  background: #dff5fc;
  color: #0879a7;
  transform: scale(1.08);
}

.df-reaction-picker.selected.like .df-reaction-trigger > span {
  background: #e3f3ff;
  color: #1687d9;
}

@media (max-width: 600px) {
  .df-reaction-trigger > span {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .df-reaction-trigger > span {
    transition: none;
  }
}