/* Like — a rounded pill button for lightweight author feedback, shown next to
   the Share button in the post meta. The heart sits on the left and the like
   count to its right. Reader likes are counted by an external counter service
   (see the like script in default.hbs). The button ships disabled and is
   enabled by JS, so it never appears clickable without working script
   (progressive enhancement). */

.like {
  display: inline-flex;
}

.like__button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px solid #d5d7da;
  border-radius: 1.5rem;
  background: #ffffff;
  color: #767676;
  font-family: "Lato", sans-serif;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.2s ease, color 0.2s ease;
}

.like__button:hover:not(:disabled) {
  color: #e0245e;
  border-color: #e0245e;
}

.like__button:active:not(:disabled) {
  transform: scale(0.96);
}

.like__button:disabled {
  cursor: default;
}

.like__icon {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.like__count {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Once liked, the heart fills in and the pill takes on the accent colour. */
.like--voted .like__button {
  color: #e0245e;
  border-color: #e0245e;
}

.like--voted .like__icon {
  fill: currentColor;
}