fix(link): fix underline animation (#10835)

**Related Issue:** #7284

## Summary

Restores the underline animation that was broken in v2.7.0
(#8797) and updates it
to work consistently in both LTR/RTL directions.

This also adds a `transition-default` mixin to provide finer-grained
control of transitions.

Author: jcfranco

packages/calcite-components/src/assets/styles/includes.scss

@@ -193,3 +193,21 @@
     }
   }
 }
+
+// we explicitly list these properties to avoid animating properties that are not intended to be animated and that might affect performance
+$common-animatable-props: "background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start, inset-size, opacity, outline-color, transform";
+
+// Mixin for default component transitions with support for customization:
+// - Use $extra-props to add specific properties (comma-separated string).
+// - Use $target-props to replace the default base properties entirely (comma-separated string).
+@mixin transition-default($target-props: $common-animatable-props, $extra-props: null) {
+  $merged-props: $target-props;
+
+  @if $extra-props != null {
+    $merged-props: join($target-props, $extra-props, comma);
+  }
+
+  transition-property: #{$merged-props};
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+}

packages/calcite-components/src/components/link/link.scss

@@ -14,7 +14,6 @@
 :host a,
 :host span {
   @apply font-inherit
-    transition-default
     relative
     flex
     cursor-pointer
@@ -29,6 +28,8 @@
   &:hover {
     text-decoration: none;
   }
+
+  @include transition-default($extra-props: "background-size");
 }
 
 // focus styles
@@ -48,7 +49,7 @@ calcite-icon {
 }
 
 .calcite-link--icon {
-  @apply transition-default align-middle;
+  @apply align-middle;
   margin-block-start: -0.25em;
 }
 
@@ -64,8 +65,7 @@ calcite-icon {
 :host {
   span,
   a {
-    @apply transition-default
-      relative
+    @apply relative
       inline
       border-none
       bg-transparent