@keyframes xbg-like-btn-circle {
  40% {
    transform: scale(10);
    opacity: 1;
    fill: #DD4688; }
  55% {
    transform: scale(11);
    opacity: 1;
    fill: #D46ABF; }
  65% {
    transform: scale(12);
    opacity: 1;
    fill: #CC8EF5; }
  75% {
    transform: scale(13);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: .5; }
  85% {
    transform: scale(17);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: .2; }
  95% {
    transform: scale(18);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: .1; }
  100% {
    transform: scale(19);
    opacity: 1;
    fill: transparent;
    stroke: #CC8EF5;
    stroke-width: 0; } }

@keyframes xbg-like-btn-heart-on {
  0% {
    transform: scale(0.2); }
  40% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }

@keyframes xbg-like-btn-heart-off {
  0% {
    transform: scale(1.4); }
  100% {
    transform: scale(1); } }

@keyframes xbg-like-btn-plus-up {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.xbg-like-btn {
  display: inline-block !important;
  outline: none;
  white-space: nowrap; }
  .xbg-like-btn-background {
    border-radius: 50%;
    background-color: #AAB8C2;
    cursor: pointer;
    height: 44px;
    opacity: .1;
    position: absolute;
    width: 44px;
    transition: background-color,opacity .2s; }
    .xbg-like-btn-background:hover {
      opacity: .2; }
  .xbg-like-btn-icon {
    display: inline-block;
    vertical-align: bottom; }
  .xbg-like-btn-svg {
    cursor: pointer;
    height: 44px;
    overflow: visible;
    vertical-align: bottom;
    width: 44px; }
    .xbg-like-btn-svg > g {
      transform: translate(467px, 392px); }
      .xbg-like-btn-svg > g > path {
        fill: none;
        stroke: #E2264D;
        stroke-width: 1.5px;
        transform-origin: center;
        animation: xbg-like-btn-heart-off 0s linear forwards; }
      .xbg-like-btn-svg > g > circle {
        fill: #E2264D;
        opacity: 0;
        transform-origin: 29.5px 29.5px; }
      .xbg-like-btn-svg > g > g {
        opacity: 0; }
        .xbg-like-btn-svg > g > g:nth-of-type(1) {
          transform: translate(24px); }
        .xbg-like-btn-svg > g > g:nth-of-type(2) {
          transform: translate(44px, 6px); }
        .xbg-like-btn-svg > g > g:nth-of-type(3) {
          transform: translate(52px, 28px); }
        .xbg-like-btn-svg > g > g:nth-of-type(4) {
          transform: translate(35px, 50px); }
        .xbg-like-btn-svg > g > g:nth-of-type(5) {
          transform: translate(14px, 50px); }
        .xbg-like-btn-svg > g > g:nth-of-type(6) {
          transform: translate(0px, 28px); }
        .xbg-like-btn-svg > g > g:nth-of-type(7) {
          transform: translate(7px, 6px); }
  .xbg-like-btn-count {
    color: #789;
    cursor: pointer;
    display: inline-block;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: 44px;
    line-height: 44px;
    padding: 0 16px 0 4px;
    position: relative;
    transition: color .2s;
    vertical-align: bottom; }
    .xbg-like-btn-count:hover {
      text-decoration: underline; }
    .xbg-like-btn-count > span:last-child {
      box-sizing: border-box;
      left: 0;
      opacity: 0;
      padding: 0 16px 0 4px;
      position: absolute;
      text-align: center;
      top: 0;
      transition: top .5s;
      width: 100%; }
  .xbg-like-btn-active .xbg-like-btn-background {
    background-color: #E2264D; }
  .xbg-like-btn-active .xbg-like-btn-svg > g > path {
    fill: #E2264D;
    stroke: none;
    animation: xbg-like-btn-heart-on 0s linear forwards; }
  .xbg-like-btn-active .xbg-like-btn-svg > g > circle {
    opacity: 1;
    animation: xbg-like-btn-circle 0s linear forwards; }
  .xbg-like-btn-active .xbg-like-btn-svg > g > g {
    opacity: 1;
    transition: .1s all .3s; }
    .xbg-like-btn-active .xbg-like-btn-svg > g > g > circle:first-child {
      transform-origin: 0 0 0;
      transition: .5s transform .3s; }
    .xbg-like-btn-active .xbg-like-btn-svg > g > g > circle:last-child {
      transform-origin: 0 0 0;
      transition: 1.5s transform .3s; }
    .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(1) > circle {
      fill: #9FC7FA; }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(1) > circle:first-child {
        transform: scale(0) translate(0, -30px); }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(1) > circle:last-child {
        transform: scale(0) translate(10px, -50px); }
    .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(2) > circle {
      fill: #CC8EF5; }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(2) > circle:first-child {
        transform: scale(0) translate(30px, -15px); }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(2) > circle:last-child {
        transform: scale(0) translate(60px, -15px); }
    .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(3) > circle {
      fill: #8CE8C3; }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(3) > circle:first-child {
        transform: scale(0) translate(30px, 0px); }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(3) > circle:last-child {
        transform: scale(0) translate(60px, 10px); }
    .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(4) > circle {
      fill: #F48EA7; }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(4) > circle:first-child {
        transform: scale(0) translate(30px, 15px); }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(4) > circle:last-child {
        transform: scale(0) translate(40px, 50px); }
    .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(5) > circle {
      fill: #91D2FA; }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(5) > circle:first-child {
        transform: scale(0) translate(-10px, 20px); }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(5) > circle:last-child {
        transform: scale(0) translate(-60px, 30px); }
    .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(6) > circle {
      fill: #CC8EF5; }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(6) > circle:first-child {
        transform: scale(0) translate(-30px, 0px); }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(6) > circle:last-child {
        transform: scale(0) translate(-60px, -5px); }
    .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(7) > circle {
      fill: #9CD8C3; }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(7) > circle:first-child {
        transform: scale(0) translate(-30px, -15px); }
      .xbg-like-btn-active .xbg-like-btn-svg > g > g:nth-of-type(7) > circle:last-child {
        transform: scale(0) translate(-55px, -30px); }
  .xbg-like-btn-active .xbg-like-btn-count {
    color: #E2264D; }
    .xbg-like-btn-active .xbg-like-btn-count > span:last-child {
      top: -20px;
      animation: xbg-like-btn-plus-up 0s linear forwards; }
  .xbg-like-btn-active-leave .xbg-like-btn-svg > g > path {
    animation-duration: .3s; }
  .xbg-like-btn-active-enter .xbg-like-btn-svg > g > path {
    animation-duration: .3s; }
  .xbg-like-btn-active-enter .xbg-like-btn-svg > g > circle {
    animation-duration: .3s; }
  .xbg-like-btn-active-enter .xbg-like-btn-count > span:last-child {
    animation-duration: 1s; }
  .xbg-like-btn-mobile .xbg-like-btn-count:hover {
    text-decoration: none; }
  .xbg-like-btn-small .xbg-like-btn-background {
    height: 32px;
    width: 32px; }
  .xbg-like-btn-small .xbg-like-btn-svg {
    height: 32px;
    width: 32px; }
  .xbg-like-btn-small .xbg-like-btn-count {
    line-height: 32px;
    height: 32px;
    font-size: 11px; }