%animate-underline {
  text-decoration-line: var(--animate-underline--text-decoration-line, none);
  text-decoration-thickness: var(--animate-underline--text-decoration-thickness, 2px);
  text-underline-offset: var(--animate-underline--text-underline-offset, 0.25em);

  &:hover,
  &:focus {
    @extend %animate-underline-active;
  }
}

%animate-underline-active {
  text-decoration-line: var(--animate-underline--text-decoration-line--active, var(--animate-underline--text-decoration-line, underline));
  text-underline-offset: var(--animate-underline--text-underline-offset--active, var(--animate-underline--text-underline-offset, 0.125em));
}
