/* Applies to both */
div.wovax-idx-heart {
    position: relative;
    display: flex;
    justify-content: center;
    justify-self: end;
    height: 26px;
    width: 35px;
    grid-area: favorite;
}
div.wovax-idx-heart::after,
div.wovax-idx-heart::before {
    position: absolute;
    content: '';
    border-radius: 50%;
    top: 50%;
    left: 50%;
}
div.wovax-idx-heart::after {
    margin: -3px;
    width: 6px;
    height: 6px;
    box-shadow: 5px -48px 0 -3px #e49, -5px -42px 0 -3px #2cf, 41px -26px 0 -3px #a5e, 30px -30px 0 -3px #f55, 46px 16px 0 -3px #e49, 42px 4px 0 -3px #2cf, 16px 46px 0 -3px #a5e, 23px 36px 0 -3px #f55, -25px 41px 0 -3px #e49, -14px 40px 0 -3px #2cf, -48px 6px 0 -3px #a5e, -40px 15px 0 -3px #f55, -34px -34px 0 -3px #2cf, -36px -22px 0 -3px #e49;
}
div.wovax-idx-heart::before {
    box-sizing: border-box;
    margin: -36px;
    border: solid 36px #f45;
    width: 72px;
    height: 72px;
    transform: scale(0);
}
div.wovax-idx-heart svg {
    display: block;
    cursor: pointer;
}
/* Not a Favorite CSS */
div.wovax-idx-heart[data-idx-fav=no] svg path {
    fill: #fff;
    stroke: #888;
}
/* Favorited CSS */
div.wovax-idx-heart[data-idx-fav=yes] svg path {
    fill:  #f45;
    stroke: #f45;
}
div.wovax-idx-heart[data-idx-fav=yes] svg {
    animation: heart 1.1s cubic-bezier(.17, .89, .32, 1.49);
    color: #f45;
    z-index: 100;
}
div.wovax-idx-heart[data-idx-fav=yes]::after,
div.wovax-idx-heart[data-idx-fav=yes]::before {
    animation-timing-function: ease-out;
}
div.wovax-idx-heart[data-idx-fav=yes]::before {
    animation: bubble 1.2s;
    will-change: transform, border-width;
}
div.wovax-idx-heart[data-idx-fav=yes]::after {
    will-change: opacity, box-shadow;
    animation: sparkles 1.2s;
}
@keyframes heart {
    0%,
    17.5% {
        transform: scale(0);
    }
}
@keyframes bubble {
    15% {
        transform: scale(1);
        border-color: #f45;
        border-width: 36px;
    }
    30%,
    to {
        transform: scale(1);
        border-color: #f45;
        border-width: 0;
    }
}
@keyframes sparkles {
    0%,
    20% {
        opacity: 0;
    }
    25% {
        opacity: 1;
        box-shadow: 5px -39px 0 0 #e49, -5px -33px 0 0 #2cf, 34px -20px 0 0 #a5e, 22px -25px 0 0 #f55, 37px 14px 0 0 #e49, 33px 2px 0 0 #2cf, 12px 37px 0 0 #a5e, 19px 28px 0 0 #f55, -22px 33px 0 0 #e49, -10px 31px 0 0 #2cf, -39px 4px 0 0 #a5e, -31px 12px 0 0 #f55, -27px -28px 0 0 #2cf, -29px -17px 0 0 #e49;
    }
}