@color-heart           : #EA442B;
@likeAnimationDuration : .5s;
@likeAnimationEasing   : cubic-bezier(.7, 0, .3, 1);

.likeButton {
    display        : flex;
    align-items    : center;
    justify-content: center;

    .ripple,
    .ripple:before,
    .ripple:after {
        position  : relative;
        box-sizing: border-box;
    }

    font-size    : 40px;
    border       : none;
    border-radius: 50%;
    width        : 1em;
    height       : 1em;
    padding      : 0;
    margin       : 0;
    outline      : none;
    z-index      : 2;
    transition   : transform @likeAnimationDuration @likeAnimationEasing;
    cursor       : pointer;

    background-color: transparent;

    &:before {
        z-index      : -1;
        content      : '';
        position     : absolute;
        top          : 0;
        left         : 0;
        width        : 100%;
        height       : 100%;
        border-radius: inherit;
        transition   : inherit;
    }

    &:after {
        content      : '';
        position     : absolute;
        top          : 0;
        left         : 0;
        width        : 100%;
        height       : 100%;
        border-radius: inherit;
        z-index      : -1;
    }

    .heart {
        position: relative;

        >path {
            stroke-width: 2;
            transition  : fill @likeAnimationDuration @likeAnimationEasing;
            stroke      : currentColor;
            fill        : transparent;
        }

        &.liked {
            >path {
                stroke: var(--primaryColor);
                fill  : var(--primaryColor);
            }
        }

        &.clicked {
            animation: heart-bounce @likeAnimationDuration @likeAnimationEasing;

            @keyframes heart-bounce {
                40% {
                    transform: scale(0.7);
                }

                0%,
                80%,
                100% {
                    transform: scale(1);
                }
            }
        }

        animation: none;
    }

    .ripple {
        position     : absolute;
        height       : 1em;
        width        : 1em;
        border-radius: 50%;
        overflow     : hidden;
        z-index      : 1;

        &:before {
            content      : '';
            position     : absolute;
            top          : 0;
            left         : 0;
            width        : 100%;
            height       : 100%;
            border       : .4em solid var(--primaryColor);
            border-radius: inherit;
            transform    : scale(0);
        }

        &.clicked {
            &:before {
                animation: ripple-out @likeAnimationDuration @likeAnimationEasing;
            }
        }

    }
}

@keyframes ripple-out {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(5);
    }
}

@keyframes depress {

    from,
    to {
        transform: none;
    }

    50% {
        transform: translateY(5%) scale(0.9);
    }
}

@keyframes depress-shadow {

    from,
    to {
        transform: none;
    }

    50% {
        transform: scale(0.5);
    }
}