/**
 * Animated heart template
 */

.wpulike-animated-heart {

  button.wp_ulike_btn {
    position: relative;
    border-radius: 50em;
    background-color: #ffffff;
    padding: 0;
    box-shadow: 0px 5px 30px rgba(255, 111, 99, 0.4);
    border: 0;
    width: 50px;
    height: 50px;

    &:hover,
    &:focus {
      background-color: #ffffff;
      background-image: none;
    }

    &[disabled=disabled],
    &:disabled {

      &:hover,
      &:active,
      &:focus {
        background-color: #ffffff;
      }
    }

    &.wp_ulike_btn_is_active {
      background-color: rgba(255, 111, 99, 1);

      &[disabled=disabled],
      &:disabled {

        &:hover,
        &:active,
        &:focus {
          background-color: rgba(255, 111, 99, 1);
        }
      }

      .wpulike-svg-heart {
        fill: #ffffff;

        &-pop {
          animation-direction: normal;
        }
      }
    }

    &:active {
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    }
  }

  .wp_ulike_is_loading {
    button.wp_ulike_btn {
      background-image: initial;
      padding: 0;

      &.wp_ulike_put_image {
        &:after {
          content: '';
        }
      }
    }
  }

  .wpulike-svg-heart {
    width: 20px;
    fill: #ff6f63;
    transition: fill .5s, transform .5s;
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);

    &-pop {
      position: absolute;
      width: 30%;
      fill: #ff6f63;
      opacity: 0;
      left: 0;
      animation: popHearts 1s ease forwards reverse;

      &.one {
        left: 1%;
        transform: rotate(-10deg);
        animation-delay: 0.45s;
      }

      &.two {
        left: 15%;
        transform: rotate(8deg);
        animation-delay: 0.25s;
      }

      &.three {
        left: 30%;
        transform: rotate(-5deg);
        animation-delay: 0s;
      }

      &.four {
        left: 50%;
        transform: rotate(-8deg);
        animation-delay: 0.3s;
      }

      &.five {
        left: 60%;
        transform: rotate(-10deg);
        animation-delay: 0.9s;
      }

      &.six {
        left: 70%;
        transform: rotate(-8deg);
        animation-delay: 0.2s;
      }

      &.seven {
        left: 85%;
        transform: rotate(6deg);
        animation-delay: 0.35s;
      }

      &.eight {
        left: 90%;
        transform: rotate(-4deg);
        animation-delay: 0.5s;
      }

      &.nine {
        left: 95%;
        transform: rotate(8deg);
        animation-delay: 0.2s;
      }
    }
  }

  .count-box {
    margin: 0 15px;
    color: #ff6f63;
    display: inline-block;
    vertical-align: middle;
  }

}

#buddypress #activity-stream {

  .activity-meta,
  .activity-comments,
  .activity-inner {
    .wpulike-animated-heart {
      .wp_ulike_btn {
        border-radius: 50em;
        background-color: #ffffff;
        padding: 0;
        box-shadow: 0px 5px 30px rgba(255, 111, 99, 0.4);
        border: 0;
        width: 50px;
        height: 50px;

        &:hover,
        &:focus {
          background-color: #ffffff;
          background-image: none;
        }

        &[disabled=disabled],
        &:disabled {

          &:hover,
          &:active,
          &:focus {
            background-color: #ffffff;
          }
        }

        &.wp_ulike_btn_is_active {
          background-color: rgba(255, 111, 99, 1);

          &[disabled=disabled],
          &:disabled {

            &:hover,
            &:active,
            &:focus {
              background-color: rgba(255, 111, 99, 1);
            }
          }
        }

        &:active {
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
        }

      }
    }

    .wp_ulike_is_loading {
      button.wp_ulike_btn {
        background-image: initial;
      }
    }
  }
}

@keyframes popHearts {
  0% {
    left: calc(50% - 7px);
    top: 10px;
  }

  20% {
    opacity: 1;
  }

  80% {
    top: -20px;
  }

  100% {
    opacity: 0;
  }
}