@supports (animation: grow .4s cubic-bezier(.25, .25, .25, 1) forwards) {
    .tick {
       stroke-opacity: 0;
       stroke-dasharray: 29px;
       stroke-dashoffset: 29px;
       animation: draw .5s cubic-bezier(.25, .25, .25, 1) forwards;
       animation-delay: .6s
   }

   .x {
    stroke-opacity: 0;
    stroke-dasharray: 29px;
    stroke-dashoffset: 29px;
    animation: draw .5s cubic-bezier(.25, .25, .25, 1) forwards;
    animation-delay: .6s
}

   .circle-tick {
       fill-opacity: 0;
       stroke: #219a00;
       stroke-width: 16px;
       transform-origin: center;
       transform: scale(0);
       animation: grow 1s cubic-bezier(.25, .25, .25, 1.25) forwards;   
   }   

   .circle-x {
    fill-opacity: 0;
    stroke: #d9534f;
    stroke-width: 16px;
    transform-origin: center;
    transform: scale(0);
    animation: grow 1s cubic-bezier(.25, .25, .25, 1.25) forwards;   
}   
}

@supports (animation: grow-x .4s cubic-bezier(.25, .25, .25, 1) forwards) {

   .x {
    stroke-opacity: 0;
    stroke-dasharray: 29px;
    stroke-dashoffset: 29px;
    animation: draw .5s cubic-bezier(.25, .25, .25, 1) forwards;
    animation-delay: .6s
}   

   .circle-x {
    fill-opacity: 0;
    stroke: #d9534f;
    stroke-width: 16px;
    transform-origin: center;
    transform: scale(0);
    animation: grow-x 1s cubic-bezier(.25, .25, .25, 1.25) forwards;   
}   
}

@keyframes grow {
   60% {
       transform: scale(.8);
       stroke-width: 4px;
       fill-opacity: 0;
   }
   100% {
       transform: scale(.9);
       stroke-width: 8px;
       fill-opacity: 1;
       fill: #219a00;
   }
}

@keyframes grow-x {
    60% {
        transform: scale(.8);
        stroke-width: 4px;
        fill-opacity: 0;
    }
    100% {
        transform: scale(.9);
        stroke-width: 8px;
        fill-opacity: 1;
        fill: #d9534f;
    }
 }

@keyframes draw {
   0%, 100% { stroke-opacity: 1; }
   100% { stroke-dashoffset: 0; }
}








/* // Styles */
:root {
 --theme-color: var(--color-purple);
}