// OrangeHRM is a comprehensive Human Resource Management (HRM) System that captures
// all the essential functionalities required for any enterprise.
// Copyright (C) 2006 OrangeHRM Inc., http://www.orangehrm.com
//
// OrangeHRM is free software: you can redistribute it and/or modify it under the terms of
// the GNU General Public License as published by the Free Software Foundation, either
// version 3 of the License, or (at your option) any later version.
//
// OrangeHRM is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
// See the GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License along with OrangeHRM.
// If not, see <https://www.gnu.org/licenses/>.

.orangehrm-heart-icon {
  background-color: rgba(100, 114, 140, 0.1);
  border-radius: 50px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  overflow: visible;
  &-path {
    transform-origin: center;
    animation: animateHeartOut 0.3s linear forwards;
  }
}

.orangehrm-heart-icon-circle {
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  position: absolute;
  border-radius: 100%;
}

.orangehrm-like-animation {
  position: relative;

  .orangehrm-heart-icon-path {
    fill: #e2264d;
    transform: scale(0.2);
    animation: animateHeart 0.3s linear forwards 0.25s;
  }
  .orangehrm-heart-icon-circle {
    animation: animateCircle 0.3s linear forwards;
  }
  .orangehrm-heart-icon-group1 {
    opacity: 1;
    transition: 0.1s all 0.3s;
    .orangehrm-heart-icon-oval1 {
      transform: scale(0) translate(0, -30px);
      transform-origin: 0 0 0;
      transition: 0.5s transform 0.3s;
    }
    .orangehrm-heart-icon-oval2 {
      transform: scale(0) translate(10px, -50px);
      transform-origin: 0 0 0;
      transition: 1.5s transform 0.3s;
    }
  }
  .orangehrm-heart-icon-group2 {
    opacity: 1;
    transition: 0.1s all 0.3s;
    .orangehrm-heart-icon-oval1 {
      transform: scale(0) translate(30px, -15px);
      transform-origin: 0 0 0;
      transition: 0.5s transform 0.3s;
    }
    .orangehrm-heart-icon-oval2 {
      transform: scale(0) translate(60px, -15px);
      transform-origin: 0 0 0;
      transition: 1.5s transform 0.3s;
    }
  }
  .orangehrm-heart-icon-group3 {
    opacity: 1;
    transition: 0.1s all 0.3s;
    .orangehrm-heart-icon-oval1 {
      transform: scale(0) translate(30px, 0px);
      transform-origin: 0 0 0;
      transition: 0.5s transform 0.3s;
    }
    .orangehrm-heart-icon-oval2 {
      transform: scale(0) translate(60px, 10px);
      transform-origin: 0 0 0;
      transition: 1.5s transform 0.3s;
    }
  }
  .orangehrm-heart-icon-group4 {
    opacity: 1;
    transition: 0.1s all 0.3s;
    .orangehrm-heart-icon-oval1 {
      transform: scale(0) translate(30px, 15px);
      transform-origin: 0 0 0;
      transition: 0.5s transform 0.3s;
    }
    .orangehrm-heart-icon-oval2 {
      transform: scale(0) translate(40px, 50px);
      transform-origin: 0 0 0;
      transition: 1.5s transform 0.3s;
    }
  }
  .orangehrm-heart-icon-group5 {
    opacity: 1;
    transition: 0.1s all 0.3s;
    .orangehrm-heart-icon-oval1 {
      transform: scale(0) translate(-10px, 20px);
      transform-origin: 0 0 0;
      transition: 0.5s transform 0.3s;
    }
    .orangehrm-heart-icon-oval2 {
      transform: scale(0) translate(-60px, 30px);
      transform-origin: 0 0 0;
      transition: 1.5s transform 0.3s;
    }
  }
  .orangehrm-heart-icon-group6 {
    opacity: 1;
    transition: 0.1s all 0.3s;
    .orangehrm-heart-icon-oval1 {
      transform: scale(0) translate(-30px, 0px);
      transform-origin: 0 0 0;
      transition: 0.5s transform 0.3s;
    }
    .orangehrm-heart-icon-oval2 {
      transform: scale(0) translate(-60px, -5px);
      transform-origin: 0 0 0;
      transition: 1.5s transform 0.3s;
    }
  }
  .orangehrm-heart-icon-group7 {
    opacity: 1;
    transition: 0.1s all 0.3s;
    .orangehrm-heart-icon-oval1 {
      transform: scale(0) translate(-30px, -15px);
      transform-origin: 0 0 0;
      transition: 0.5s transform 0.3s;
    }
    .orangehrm-heart-icon-oval2 {
      transform: scale(0) translate(-55px, -30px);
      transform-origin: 0 0 0;
      transition: 1.5s transform 0.3s;
    }
  }
}

@keyframes animateCircle {
  0% {
    border: 0px;
    opacity: 0.6;
    display: block;
    transform: scale(0);
    background-color: #e2264d;
  }
  40% {
    transform: scale(0.2);
    background-color: #dd4688;
  }
  55% {
    transform: scale(0.4);
    background-color: #d46abf;
  }
  65% {
    transform: scale(0.6);
    background-color: #cc8ef5;
  }
  75% {
    opacity: 0.8;
    transform: scale(0.8);
    border: 5px solid #cc8ef5;
    background-color: transparent;
  }
  85% {
    border: 2.5px solid #cc8ef5;
    background-color: transparent;
  }
  95% {
    border: 2.5px solid #cc8ef5;
    background-color: transparent;
  }
  99% {
    display: block;
  }
  100% {
    opacity: 0;
    border: 0px;
    display: none;
    transform: scale(1);
  }
}

@keyframes animateHeart {
  0% {
    transform: scale(0.2);
  }
  40% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes animateHeartOut {
  0% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
