/* The counter outline and its filled exterior share one rounded silhouette.
   Font icon classes keep their existing colors, sizes and interaction states. */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
    .fa-heart::before,
    .likes-clickable[data-type="model"]::before {
        content: "";
        background-color: currentColor;
        -webkit-mask: url("../assets/heart-filled.svg") center / contain no-repeat;
        mask: url("../assets/heart-filled.svg") center / contain no-repeat;
    }

    .fa-heart::before {
        display: inline-block;
        width: 1em;
        height: 1em;
        vertical-align: -.125em;
    }

    .fa-heart:is(.far, .fa-regular)::before {
        -webkit-mask-image: url("../assets/model-like.svg");
        mask-image: url("../assets/model-like.svg");
    }

    .likes-clickable[data-type="model"]::before {
        width: 14px;
        height: 14px;
    }
}