:root {
  --xm-like-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M244 130.6l-12-13.5-4.2-4.7c-26-29.2-65.3-42.8-103.8-35.8c-53.3 9.7-92 56.1-92 110.3v3.5c0 32.3 13.4 63.1 37.1 85.1L253 446.8c.8 .7 1.9 1.2 3 1.2s2.2-.4 3-1.2L443 275.5c23.6-22 37-52.8 37-85.1v-3.5c0-54.2-38.7-100.6-92-110.3c-38.5-7-77.8 6.6-103.8 35.8l-4.2 4.7-12 13.5c-3 3.4-7.4 5.4-12 5.4s-8.9-2-12-5.4zm34.9-57.1C311 48.4 352.7 37.7 393.7 45.1C462.2 57.6 512 117.3 512 186.9v3.5c0 36-13.1 70.6-36.6 97.5c-3.4 3.8-6.9 7.5-10.7 11l-184 171.3c-.8 .8-1.7 1.5-2.6 2.2c-6.3 4.9-14.1 7.5-22.1 7.5c-9.2 0-18-3.5-24.8-9.7L47.2 299c-3.8-3.5-7.3-7.2-10.7-11C13.1 261 0 226.4 0 190.4v-3.5C0 117.3 49.8 57.6 118.3 45.1c40.9-7.4 82.6 3.2 114.7 28.4c6.7 5.3 13 11.1 18.7 17.6l4.2 4.7 4.2-4.7c4.2-4.7 8.6-9.1 13.3-13.1c1.8-1.5 3.6-3 5.4-4.5z"/></svg>');
  --xm-like-icon-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>');
  --xm-like-icon-width: 20px;
  --xm-like-icon-height: 20px;
}
.like-button {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.like-button:hover:before {
  background-color: var(--xm-like-button-hover, black);
}
.like-button:not(.simple) {
  height: 40px;
  width: 40px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  padding: 10px;
  opacity: 0.7;
}
.like-button:not(.simple):before {
  content: "";
  height: var(--xm-like-icon-height);
  width: var(--xm-like-icon-width);
  display: inline-block;
  mask-size: cover;
  background-color: var(--xm-like-button, black);
}
.like-button:not(.simple):hover {
  opacity: 1;
}
.like-button.simple:before {
  content: "";
  height: 1em ;
  width: 1em;
  display: inline-block;
  position: relative;
  margin-right: 10px;
  mask-size: cover;
  background-color: var(--xm-like-button, black);
}
.like-button.active {
  opacity: 1;
}
.like-button.active:before {
  -webkit-mask-image: var(--xm-like-icon-active);
  mask-image: var(--xm-like-icon-active);
}
.like-button:not(.active):before {
  -webkit-mask-image: var(--xm-like-icon);
  mask-image: var(--xm-like-icon);
}