@use "./site-config";
@use "./animate-underline";
@use "./fontawesome";
@use "s360-scss-toolkit";

/// Defines the styles for the with-arrow CTA.
///
/// @access public
///
%cta-with-arrow {
  color: var(--cta-with-arrow--color);

  &::after {
    @include fontawesome.icon('arrow-right');

    transition: all 200ms ease-in-out;
    margin-left: 0.5em;
    transform: translateX(var(--cta-with-arrow--after--translate-x, 0));
  }

  &:hover,
  &:focus-visible {
    --cta-with-arrow--after--translate-x: 0.25em;
    --cta-with-arrow--color: var(--cta-with-arrow--color--active);
  }
}
