/* 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); }
  
}