@cloudscape-design/components-themeable 3.0.1350 → 3.0.1352

package/lib/internal/scss/icon/hover-motion.scss

@@ -0,0 +1,1046 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+// This file holds icon hover motions, emitted only for themes that opt in to
+// expressive motion via the `$expressive-motion-themes` list in
+// internal/styles/utils/theming.scss.
+
+@use '../internal/styles/utils/theming' as theming;
+
+// Descendant combinators and type selectors are unavoidable here since the trigger
+// is an ancestor element and the target is an SVG shape.
+// stylelint-disable selector-combinator-disallowed-list, selector-max-type, selector-class-pattern
+// stylelint-disable @cloudscape-design/no-implicit-descendant
+
+$_duration-generic: 250ms;
+$_ease-decelerate: cubic-bezier(0, 0, 0, 1);
+
+// A disabled control must not react to hover.
+$_enabled-only: ':not(:disabled):not([aria-disabled="true"])';
+
+// Motion must only play if .awsui-motion-disabled and .awsui-mode-entering are not set.
+$_motion-on: ':not(.awsui-motion-disabled):not(.awsui-mode-entering)';
+
+// The following data attribute on an SVG enables motion.
+$_animated-attribute: 'data-awsui-icon-animated';
+$_opted-in: 'svg[#{$_animated-attribute}]';
+
+// Opt-in attribute for which element triggers hover motion.
+$_trigger-attribute: 'data-awsui-motion-trigger';
+$_hover-trigger: '[#{$_trigger-attribute}~="hover"]#{$_enabled-only}';
+
+// Opt-in attribute for where the motion should be applied within a trigger region.
+$_target-attribute: 'data-awsui-motion-target';
+$_animating-icon: ':is([#{$_target-attribute}], :where([#{$_target-attribute}] *))';
+
+$_ease-out: ease-out;
+$_ease-symmetric: cubic-bezier(0.33, 0, 0.67, 1);
+$_ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+$icon-hover-motion: (
+  'announcement': (
+    (
+      duration: 400ms,
+      easing: $_ease-spring,
+      to: (
+        transform: rotate(-12deg) scale(0.84),
+      ),
+    ),
+  ),
+  'heart': (
+    (
+      animation: icon-pulse-soft,
+      duration: 450ms,
+      easing: $_ease-out,
+    ),
+  ),
+  'heart-filled': (
+    (
+      animation: icon-pulse-strong,
+      duration: 500ms,
+      easing: $_ease-out,
+    ),
+  ),
+  'settings': (
+    (
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: rotate(60deg),
+      ),
+    ),
+  ),
+  'thumbs-up': (
+    (
+      duration: 400ms,
+      easing: $_ease-spring,
+      to: (
+        transform: rotate(-12deg) scale(0.92),
+      ),
+    ),
+  ),
+  'thumbs-up-filled': (
+    (
+      duration: 400ms,
+      easing: $_ease-spring,
+      to: (
+        transform: rotate(-12deg) scale(0.92),
+      ),
+    ),
+  ),
+  'thumbs-down': (
+    (
+      duration: 400ms,
+      easing: $_ease-spring,
+      to: (
+        transform: rotate(12deg) scale(0.92),
+      ),
+    ),
+  ),
+  'thumbs-down-filled': (
+    (
+      duration: 400ms,
+      easing: $_ease-spring,
+      to: (
+        transform: rotate(12deg) scale(0.92),
+      ),
+    ),
+  ),
+  'face-happy-filled': (
+    (
+      duration: 350ms,
+      easing: $_ease-spring,
+      to: (
+        transform: rotate(-3deg),
+      ),
+    ),
+  ),
+  'face-happy': (
+    (
+      duration: 350ms,
+      easing: $_ease-spring,
+      to: (
+        transform: rotate(-3deg),
+      ),
+    ),
+    (
+      part: 'awsui-icon-mouth',
+      animation: icon-mouth-smile-grow,
+      duration: 900ms,
+      easing: $_ease-symmetric,
+      base: (
+        stroke-dasharray: 7.4,
+        stroke-dashoffset: 0,
+      ),
+    ),
+  ),
+  'face-neutral': (
+    (
+      duration: 350ms,
+      easing: $_ease-spring,
+      to: (
+        transform: rotate(3deg),
+      ),
+    ),
+    (
+      part: 'awsui-icon-mouth',
+      animation: icon-mouth-tilt,
+      duration: 700ms,
+      easing: $_ease-symmetric,
+      origin: 8px 10px,
+    ),
+  ),
+  'face-sad': (
+    (
+      part: 'awsui-icon-mouth',
+      animation: icon-mouth-frown-deepen,
+      duration: 900ms,
+      easing: $_ease-symmetric,
+      base: (
+        stroke-dasharray: 7.4,
+        stroke-dashoffset: 0,
+      ),
+    ),
+  ),
+  'gen-ai': (
+    (
+      part: 'awsui-icon-sparkle',
+      animation: icon-sparkle-pinch,
+      duration: 500ms,
+      easing: ease,
+      origin: 50% center,
+      base: (
+        transform-box: fill-box,
+      ),
+    ),
+  ),
+  'search-gen-ai': (
+    (
+      part: 'awsui-icon-sparkle',
+      animation: icon-sparkle-pinch,
+      duration: 500ms,
+      easing: ease,
+      origin: 50% center,
+      base: (
+        transform-box: fill-box,
+      ),
+    ),
+  ),
+  'edit-gen-ai': (
+    (
+      part: 'awsui-icon-sparkle',
+      animation: icon-sparkle-pinch,
+      duration: 500ms,
+      easing: ease,
+      origin: 50% center,
+      base: (
+        transform-box: fill-box,
+      ),
+    ),
+  ),
+  'suggestions-gen-ai': (
+    (
+      part: 'awsui-icon-sparkle',
+      animation: icon-sparkle-pinch,
+      duration: 500ms,
+      easing: ease,
+      origin: 50% center,
+      base: (
+        transform-box: fill-box,
+      ),
+    ),
+  ),
+  'copy': (
+    (
+      part: 'awsui-icon-front',
+      duration: 150ms,
+      easing: $_ease-symmetric,
+      to: (
+        transform: translate(-4%, -4%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-back',
+      duration: 150ms,
+      easing: $_ease-symmetric,
+      to: (
+        transform: translate(4%, 4%),
+      ),
+    ),
+  ),
+  'refresh': (
+    (
+      part: 'awsui-icon-arc',
+      animation: icon-coil,
+      duration: 500ms,
+      easing: $_ease-symmetric,
+      origin: 8px 8px,
+    ),
+    (
+      part: 'awsui-icon-arrow',
+      animation: icon-coil-arrow,
+      duration: 500ms,
+      easing: $_ease-symmetric,
+      origin: 8px 8px,
+      base: (
+        stroke-dasharray: 0 0 10.01 0,
+      ),
+    ),
+  ),
+  'upload': (
+    (
+      part: 'awsui-icon-arrow',
+      animation: icon-nudge-up,
+      duration: 500ms,
+      easing: $_ease-out,
+    ),
+  ),
+  'download': (
+    (
+      part: 'awsui-icon-arrow',
+      animation: icon-nudge-down,
+      duration: 500ms,
+      easing: $_ease-out,
+    ),
+  ),
+  'upload-download': (
+    (
+      part: 'awsui-icon-up',
+      animation: icon-nudge-up-once,
+      duration: 500ms,
+      easing: $_ease-out,
+    ),
+    (
+      part: 'awsui-icon-down',
+      animation: icon-nudge-down-once,
+      duration: 500ms,
+      easing: $_ease-out,
+    ),
+  ),
+  'undo': (
+    (
+      part: 'awsui-icon-arrow',
+      animation: icon-nudge-back,
+      duration: 500ms,
+      easing: $_ease-out,
+    ),
+    (
+      part: 'awsui-icon-line',
+      animation: icon-shaft-retract,
+      duration: 500ms,
+      easing: $_ease-out,
+      base: (
+        stroke-dasharray: 25.15,
+        stroke-dashoffset: 0,
+      ),
+    ),
+  ),
+  'redo': (
+    (
+      part: 'awsui-icon-arrow',
+      animation: icon-nudge-forward,
+      duration: 500ms,
+      easing: $_ease-out,
+    ),
+    (
+      part: 'awsui-icon-line',
+      animation: icon-shaft-retract,
+      duration: 500ms,
+      easing: $_ease-out,
+      base: (
+        stroke-dasharray: 25.15,
+        stroke-dashoffset: 0,
+      ),
+    ),
+  ),
+  'external': (
+    (
+      part: 'awsui-icon-arrow',
+      animation: icon-nudge-up-right,
+      duration: 500ms,
+      easing: $_ease-out,
+    ),
+  ),
+  'sign-out': (
+    (
+      part: 'awsui-icon-arrow',
+      animation: icon-nudge-in,
+      duration: 500ms,
+      easing: $_ease-out,
+    ),
+  ),
+  'shrink': (
+    (
+      part: 'awsui-icon-corner-tr',
+      animation: icon-nudge-down-left,
+      duration: 500ms,
+      easing: $_ease-out,
+    ),
+    (
+      part: 'awsui-icon-corner-bl',
+      animation: icon-nudge-up-right,
+      duration: 500ms,
+      easing: $_ease-out,
+    ),
+  ),
+  'expand': (
+    (
+      part: 'awsui-icon-corner-tl',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translate(-5%, -5%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-corner-tr',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translate(5%, -5%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-corner-bl',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translate(-5%, 5%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-corner-br',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translate(5%, 5%),
+      ),
+    ),
+  ),
+  'full-screen': (
+    (
+      part: 'awsui-icon-corner-tl',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translate(4%, 4%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-corner-tr',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translate(-4%, 4%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-corner-bl',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translate(4%, -4%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-corner-br',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translate(-4%, -4%),
+      ),
+    ),
+  ),
+  'exit-full-screen': (
+    (
+      part: 'awsui-icon-corner-tl',
+      duration: 500ms,
+      easing: $_ease-spring,
+      origin: 3.5px 3.5px,
+      to: (
+        transform: translate(5%, 5%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-corner-tr',
+      duration: 500ms,
+      easing: $_ease-spring,
+      origin: 12.5px 3.5px,
+      to: (
+        transform: translate(-5%, 5%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-corner-bl',
+      duration: 500ms,
+      easing: $_ease-spring,
+      origin: 3.5px 12.5px,
+      to: (
+        transform: translate(5%, -5%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-corner-br',
+      duration: 500ms,
+      easing: $_ease-spring,
+      origin: 12.5px 12.5px,
+      to: (
+        transform: translate(-5%, -5%),
+      ),
+    ),
+  ),
+  'remove': (
+    (
+      part: 'awsui-icon-lid',
+      duration: 500ms,
+      easing: $_ease-spring,
+      origin: 0px 100%,
+      base: (
+        transform-box: fill-box,
+      ),
+      to: (
+        transform: rotate(-4deg),
+      ),
+    ),
+    (
+      part: 'awsui-icon-side',
+      duration: 500ms,
+      easing: $_ease-spring,
+      origin: center bottom,
+      base: (
+        transform-box: fill-box,
+      ),
+      to: (
+        transform: scaleY(0.78),
+      ),
+    ),
+  ),
+  'zoom-to-fit': (
+    (
+      part: 'awsui-icon-square',
+      duration: 450ms,
+      easing: cubic-bezier(0.4, 0, 0.2, 1),
+      origin: 8px 8px,
+      to: (
+        transform: scale(1.15),
+      ),
+    ),
+  ),
+  'multiscreen': (
+    (
+      part: 'awsui-icon-front',
+      duration: 150ms,
+      easing: $_ease-symmetric,
+      to: (
+        transform: translate(-4%, -4%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-back',
+      duration: 150ms,
+      easing: $_ease-symmetric,
+      to: (
+        transform: translate(4%, 4%),
+      ),
+    ),
+  ),
+  'lock-private': (
+    (
+      part: 'awsui-icon-clip',
+      base: (
+        clip-path: inset(0 0 56.25% 0) view-box,
+      ),
+    ),
+    (
+      part: 'awsui-icon-shackle',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translateY(6.25%),
+      ),
+    ),
+  ),
+  'unlocked': (
+    (
+      part: 'awsui-icon-clip',
+      base: (
+        clip-path: inset(0 0 56.25% 0) view-box,
+      ),
+    ),
+    (
+      part: 'awsui-icon-shackle',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translateY(6.25%),
+      ),
+    ),
+  ),
+  'notification': (
+    (
+      part: 'awsui-icon-bell',
+      animation: icon-bell-rotate,
+      duration: 1000ms,
+      easing: ease-in-out,
+      origin: 8px 4px,
+    ),
+    (
+      part: 'awsui-icon-ringer',
+      animation: icon-ringer-bounce,
+      duration: 400ms,
+      easing: ease-in-out,
+      origin: 8px 12.25px,
+    ),
+  ),
+  'history': (
+    (
+      part: 'awsui-icon-hand',
+      duration: 450ms,
+      easing: $_ease-spring,
+      origin: 9px 9px,
+      to: (
+        transform: rotate(-45deg),
+      ),
+    ),
+  ),
+  'backward-10-seconds': (
+    (
+      part: 'awsui-icon-arc',
+      duration: 250ms,
+      easing: $_ease-out,
+      property: stroke-dashoffset,
+      base: (
+        stroke-dasharray: 30,
+        stroke-dashoffset: 0,
+      ),
+      to: (
+        stroke-dashoffset: -4px,
+      ),
+    ),
+    (
+      part: 'awsui-icon-one',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translateX(4%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-zero',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translateX(4%),
+      ),
+    ),
+  ),
+  'forward-10-seconds': (
+    (
+      part: 'awsui-icon-arc',
+      duration: 250ms,
+      easing: $_ease-out,
+      property: stroke-dashoffset,
+      base: (
+        stroke-dasharray: 30,
+        stroke-dashoffset: 0,
+      ),
+      to: (
+        stroke-dashoffset: -4px,
+      ),
+    ),
+    (
+      part: 'awsui-icon-one',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translateX(-4%),
+      ),
+    ),
+    (
+      part: 'awsui-icon-zero',
+      duration: 500ms,
+      easing: $_ease-spring,
+      to: (
+        transform: translateX(-4%),
+      ),
+    ),
+  ),
+  'view-horizontal': (
+    (
+      part: 'awsui-icon-panel',
+      duration: 450ms,
+      easing: cubic-bezier(0.4, 0, 0.2, 1),
+      origin: 8px 9.5px,
+      to: (
+        transform: scale(1.08),
+      ),
+    ),
+  ),
+  'view-vertical': (
+    (
+      part: 'awsui-icon-panel',
+      duration: 450ms,
+      easing: cubic-bezier(0.4, 0, 0.2, 1),
+      origin: 9.5px 8px,
+      to: (
+        transform: scale(1.08),
+      ),
+    ),
+  ),
+  'zoom-in': (
+    (
+      part: 'awsui-icon-arm',
+      duration: 450ms,
+      easing: cubic-bezier(0.4, 0, 0.2, 1),
+      origin: 7px 7px,
+      to: (
+        transform: scale(1.15),
+      ),
+    ),
+  ),
+  'zoom-out': (
+    (
+      part: 'awsui-icon-arm',
+      duration: 450ms,
+      easing: cubic-bezier(0.4, 0, 0.2, 1),
+      origin: 7px 7px,
+      to: (
+        transform: scale(0.85),
+      ),
+    ),
+  ),
+  'bug': (
+    (
+      part: 'awsui-icon-leg-tl',
+      animation: icon-gait-a,
+      duration: 600ms,
+      easing: $_ease-symmetric,
+      iterations: 2,
+      origin: 4px 5.71px,
+    ),
+    (
+      part: 'awsui-icon-leg-mr',
+      animation: icon-gait-a,
+      duration: 600ms,
+      easing: $_ease-symmetric,
+      iterations: 2,
+      origin: 12px 8.71px,
+    ),
+    (
+      part: 'awsui-icon-leg-bl',
+      animation: icon-gait-a,
+      duration: 600ms,
+      easing: $_ease-symmetric,
+      iterations: 2,
+      origin: 4px 11.71px,
+    ),
+    (
+      part: 'awsui-icon-leg-tr',
+      animation: icon-gait-b,
+      duration: 600ms,
+      easing: $_ease-symmetric,
+      iterations: 2,
+      origin: 12px 5.71px,
+    ),
+    (
+      part: 'awsui-icon-leg-ml',
+      animation: icon-gait-b,
+      duration: 600ms,
+      easing: $_ease-symmetric,
+      iterations: 2,
+      origin: 4px 8.71px,
+    ),
+    (
+      part: 'awsui-icon-leg-br',
+      animation: icon-gait-b,
+      duration: 600ms,
+      easing: $_ease-symmetric,
+      iterations: 2,
+      origin: 12px 11.71px,
+    ),
+  ),
+);
+
+// @keyframes cannot nest under a class, so they're gated on the artefact instead of the selector.
+@mixin keyframes {
+  @if theming.has-expressive-motion() {
+    @keyframes icon-pulse-soft {
+      0% {
+        transform: scale(1);
+      }
+      22% {
+        transform: scale(0.85);
+      }
+      44% {
+        transform: scale(1);
+      }
+      67% {
+        transform: scale(0.9);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+
+    @keyframes icon-pulse-strong {
+      0%,
+      100% {
+        transform: scale(1);
+      }
+      40% {
+        transform: scale(0.9);
+      }
+    }
+
+    @keyframes icon-mouth-frown-deepen {
+      0%,
+      100% {
+        stroke-dasharray: 7.4;
+        stroke-dashoffset: 0;
+      }
+      50% {
+        stroke-dasharray: 6, 7.4;
+        stroke-dashoffset: -0.7px;
+      }
+    }
+
+    @keyframes icon-mouth-smile-grow {
+      0%,
+      100% {
+        stroke-dasharray: 7.4;
+        stroke-dashoffset: 0;
+      }
+      50% {
+        stroke-dasharray: 6, 7.4;
+        stroke-dashoffset: -0.7px;
+      }
+    }
+
+    @keyframes icon-mouth-tilt {
+      0%,
+      100% {
+        transform: rotate(0deg);
+      }
+      35%,
+      65% {
+        transform: rotate(-4deg);
+      }
+    }
+
+    @keyframes icon-nudge-up {
+      0%,
+      40%,
+      80%,
+      100% {
+        transform: translateY(0);
+      }
+      20%,
+      60% {
+        transform: translateY(-8%);
+      }
+    }
+
+    @keyframes icon-nudge-down {
+      0%,
+      40%,
+      80%,
+      100% {
+        transform: translateY(0);
+      }
+      20%,
+      60% {
+        transform: translateY(8%);
+      }
+    }
+
+    @keyframes icon-nudge-up-once {
+      0%,
+      100% {
+        transform: translateY(0);
+      }
+      45% {
+        transform: translateY(-8%);
+      }
+    }
+
+    @keyframes icon-nudge-down-once {
+      0%,
+      100% {
+        transform: translateY(0);
+      }
+      45% {
+        transform: translateY(8%);
+      }
+    }
+
+    @keyframes icon-nudge-back {
+      0%,
+      40%,
+      80%,
+      100% {
+        transform: translateX(0);
+      }
+      20%,
+      60% {
+        transform: translateX(14%);
+      }
+    }
+
+    @keyframes icon-nudge-forward {
+      0%,
+      40%,
+      80%,
+      100% {
+        transform: translateX(0);
+      }
+      20%,
+      60% {
+        transform: translateX(-14%);
+      }
+    }
+
+    @keyframes icon-shaft-retract {
+      0%,
+      40%,
+      80%,
+      100% {
+        stroke-dashoffset: 0;
+      }
+      20%,
+      60% {
+        stroke-dashoffset: -2.24px;
+      }
+    }
+
+    @keyframes icon-nudge-in {
+      0%,
+      40%,
+      80%,
+      100% {
+        transform: translateX(0);
+      }
+      20%,
+      60% {
+        transform: translateX(-8%);
+      }
+    }
+
+    @keyframes icon-nudge-up-right {
+      0%,
+      40%,
+      80%,
+      100% {
+        transform: translate(0, 0);
+      }
+      20%,
+      60% {
+        transform: translate(5%, -5%);
+      }
+    }
+
+    @keyframes icon-nudge-down-left {
+      0%,
+      40%,
+      80%,
+      100% {
+        transform: translate(0, 0);
+      }
+      20%,
+      60% {
+        transform: translate(-5%, 5%);
+      }
+    }
+
+    @keyframes icon-gait-a {
+      0%,
+      100% {
+        transform: rotate(0deg);
+      }
+      50% {
+        transform: rotate(-8deg);
+      }
+    }
+
+    @keyframes icon-gait-b {
+      0%,
+      100% {
+        transform: rotate(0deg);
+      }
+      50% {
+        transform: rotate(8deg);
+      }
+    }
+
+    @keyframes icon-sparkle-pinch {
+      0%,
+      100% {
+        transform: scale(1);
+      }
+      40% {
+        transform: scale(0.8) rotate(-15deg);
+      }
+    }
+
+    @keyframes icon-bell-rotate {
+      0%,
+      100% {
+        transform: rotate(0deg);
+      }
+      20% {
+        transform: rotate(8deg);
+      }
+      40% {
+        transform: rotate(-6deg);
+      }
+      60% {
+        transform: rotate(4deg);
+      }
+      80% {
+        transform: rotate(-2deg);
+      }
+    }
+
+    @keyframes icon-ringer-bounce {
+      0%,
+      100% {
+        transform: translateX(0);
+      }
+      20% {
+        transform: translateX(5%);
+      }
+      40% {
+        transform: translateX(-5%);
+      }
+      60% {
+        transform: translateX(2.5%);
+      }
+      80% {
+        transform: translateX(-1.5%);
+      }
+    }
+
+    @keyframes icon-coil {
+      0%,
+      100% {
+        transform: rotate(0deg);
+      }
+      55% {
+        transform: rotate(-14deg);
+      }
+    }
+
+    @keyframes icon-coil-arrow {
+      0%,
+      100% {
+        stroke-dasharray: 0 0 10.01 0;
+        transform: rotate(0deg);
+      }
+      55% {
+        stroke-dasharray: 0 2 6.01 2;
+        transform: rotate(-14deg);
+      }
+    }
+  }
+}
+
+// Named with-motion so the no-motion-outside-of-mixin stylelint rule can find callers.
+@mixin with-motion {
+  @include theming.expressive-motion-only($_motion-on) {
+    @content;
+  }
+}
+
+// Also fires on :focus-visible, covering a focus owner nested inside the trigger.
+@mixin _on-hover-trigger($suffix) {
+  #{'#{$_hover-trigger}:hover #{$suffix}'},
+  #{'#{$_hover-trigger}:is(:focus-visible, :has([#{$_trigger-attribute}~="focus"]:focus-visible)) #{$suffix}'} {
+    @content;
+  }
+}
+
+@mixin generic-hover-motion {
+  .icon > :global(#{$_opted-in}) {
+    @include with-motion {
+      transition-property: transform;
+      transition-duration: $_duration-generic;
+      transition-timing-function: $_ease-decelerate;
+    }
+  }
+
+  @include _on-hover-trigger('.icon#{$_animating-icon} > :global(#{$_opted-in})') {
+    @include with-motion {
+      transform: scale(0.94);
+    }
+  }
+}
+
+@mixin icon-hover-motion {
+  @media (prefers-reduced-motion: no-preference) {
+    @include generic-hover-motion;
+  }
+}
+
+// stylelint-enable selector-combinator-disallowed-list, selector-max-type, selector-class-pattern
+// stylelint-enable @cloudscape-design/no-implicit-descendant