.like {
  --like-icon-placeholder: url(like.svg);
  --like-icon-red: url(like-red.svg);
  --like-icon-active: url(like-fill.svg);
  --like-icon: var(--like-icon-placeholder);
  --like-color: #8f8f8f;
}

.like__button--used {
  --like-icon: var(--like-icon-active);
  --like-color: #f72d34;
}

.like__button:not(.like__button--used)::before {
  filter: saturate(0) opacity(0.5);
}

.like__button {
  display: inline-flex;
  align-items: center;
  color: var(--like-color);
  transition: 0.2s;
  user-select: none;
  width: 32px;
  white-space: nowrap;
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
}

.like__button::before {
  content: "";
  display: block;
  background: var(--like-icon);
  background-repeat: no-repeat;
  background-position: center;
  width: 32px;
  height: 32px;
  transition: 0.2s;
  border-radius: 32px;
  flex-shrink: 0;
}

.like__button:hover::before {
  filter: saturate(1) opacity(1);
  background-color: #ffebef;
}

.like__button:hover {
  --like-color: #f72d34;
}

.like__button:not(.like__button--used):hover {
  --like-icon: var(--like-icon-red);
}

/* Comments link. */
.node__comments__link {
  user-select: none;
}

.node__comments__link .icon-comment {
  display: flex;
  place-content: center;
  background: var(--like-icon);
  background-repeat: no-repeat;
  background-position: center;
  width: 32px;
  height: 32px;
  transition: 0.2s;
  border-radius: 32px;
}

.node-article-teaser .node__comments__link:hover {
  color: #2060a5;
}

.node__comments__link:hover .icon-comment {
  filter: saturate(1) opacity(1);
  background-color: rgba(32, 96, 165, 0.16);
}

.node__comments__link:hover .icon-comment svg path {
  stroke: #2060a5;
}

.node__comments__link .node__comments-count {
  white-space: nowrap;
  font-size: 14px;
  line-height: 24px;
}