/* Global attribute to easily control easing and timing of all targetted elements */
[data-button-anim-target] {
  transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Fake a duplicate text element using text shadow without blur  */
/* We save the distance in a variable for easy use in the CSS animation */
.btn-icon-content__text {
  --text-duplicate-distance: 1.5em;
  text-shadow: 0px var(--text-duplicate-distance) currentColor;
}

/* Only apply hover animations if they are actually not supported */
@media (hover:hover) and (pointer:fine) {

  .btn-icon-link:hover .btn-icon-content__text {
    transform: translate(0px, calc(-1 * var(--text-duplicate-distance)));
  }

  .btn-icon-link:hover .btn-icon-icon__bg {
    transform: rotate(90deg);
  }

  .btn-icon-link:hover .btn-icon-icon__arrow {
    transform: translate(200%, 0px);
  }

  .btn-icon-link:hover .btn-icon-content__bg {
    transform: translate(0px, 0%) rotate(0deg);
  }

}