@layer components {
  .main-animate {
    a {
      @apply w-[50px] h-[50px] flex justify-center items-center overflow-hidden bg-[rgba(var(--light-bg),1)];
    }
    svg {
      @apply w-[22px] h-[22px] stroke-[rgba(var(--chart-text-color),0.8)];
    }
    i {
      @apply leading-[1] text-[rgba(var(--chart-text-color),1)] text-base rounded-[50%];
    }
  }
  .pulse-wrapper {
    a {
      @apply rounded-[50%];
    }
    svg {
      @apply rounded-[50%];
      animation: pulse-animate 1s infinite ease;
    }
    i {
      animation: pulse-animate 1s infinite ease;
    }
    @keyframes pulse-animate {
      0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
      }

      100% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
      }
    }
  }
  .heartbeat-wrapper {  
    a {
      @apply rounded-[50%];
    }

    svg {
      @apply stroke-[rgba(var(--danger-color),1)] rounded-[50%];
      animation: heartbeat-rate 1s infinite ease;
    }

    i {
      @apply text-[rgba(var(--danger-color),1)];
      animation: heartbeat-rate 1s infinite ease;
    }
  }
  .custom-border-pulse-wrapper {
    a {
      @apply border-[rgba(var(--recent-dashed-border),1)] border-4 border-double;
      border-radius: unset;

      svg,
      i {
        @apply rounded-[1%];
      }
    }
  }
  .pulse-rhombus {
    a {
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }

    svg,
    i {
      @apply rounded-none;
    }
  }
  .pulse-rabbet {
    a {
      clip-path: polygon(
        0% 15%,
        15% 15%,
        15% 0%,
        85% 0%,
        85% 15%,
        100% 15%,
        100% 85%,
        85% 85%,
        85% 100%,
        15% 100%,
        15% 85%,
        0% 85%
      );
    }
  }
  @keyframes heartbeat-rate {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    15% {
      transform: scale(0.8);
    }

    20% {
      transform: scale(0.85);
      opacity: 1;
    }

    35% {
      transform: scale(1.3);
      opacity: 0.6; 
    }

    50% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(1);
    }
  }

  @media (max-width: 331px) {
    .main-animate {
      .common-flex {
        @apply justify-center;
      }
    }
  }
}