/* Purpose-made action symbols. Motion responds once to a user's gesture. */
svg.action-icon {
  --action-gesture: 0;
  display: inline-block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  vertical-align: middle;
  overflow: visible;
}
.action-icon__seeds { opacity: 0; }
.action-icon :is(.action-icon__cap,.action-icon__base,.action-icon__seeds,.action-icon__bag,.action-icon__pill,.action-icon__bubble,.action-icon__dot,.action-icon__paper,.action-icon__bead,.action-icon__orbit,.action-icon__transfer,.action-icon__flap,.action-icon__lid) {
  transform-box: fill-box;
  transform-origin: center;
}

/* Match the established control sizes without changing their text layout. */
.circle-link .action-icon { width: 32px; height: 32px; }
.product-quick-view .action-icon { width: 26px; height: 26px; }
.header-order .action-icon { width: 23px; height: 23px; }
.announcement .action-icon { width: 18px; height: 18px; }
.story-contact-link .action-icon { width: 24px; height: 24px; }
.collection-product-arrow .action-icon { width: min(22px, 100%); height: 22px; }
.detail-photo .detail-label-link { gap: 8px; }
.art-replay-caption .action-icon { width: 22px; height: 22px; }
.scene-text-button > .action-icon,
.shop-cta > .action-icon { color: var(--acid, #f5d21b); }
.formula-cue-action .action-icon { transform: none; }
:is(.detail-button,.detail-secondary):has(.action-icon) { gap: 10px; }
:is(.detail-explorer,.viewer-hint) .action-icon { margin-inline-start: 8px; }
.immersive-theme .product-quick-view:hover,
.circle-link:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: no-preference) {
  .action-icon :is(.action-icon__cap,.action-icon__base,.action-icon__seeds,.action-icon__bag,.action-icon__pill,.action-icon__bubble,.action-icon__dot,.action-icon__paper,.action-icon__bead,.action-icon__orbit,.action-icon__transfer,.action-icon__flap,.action-icon__lid) {
    transition: transform 280ms cubic-bezier(.2,.75,.3,1), opacity 220ms ease;
  }
  :where(a,button,summary,[role="button"]):not(:disabled):not([aria-disabled="true"]):is(:focus-visible,:active) .action-icon { --action-gesture: 1; }
  .action-icon__cap { transform: translateY(calc(var(--action-gesture) * -2px)); }
  .action-icon__base { transform: translateY(calc(var(--action-gesture) * 1.2px)); }
  .action-icon__seeds { opacity: var(--action-gesture); }
  .action-icon__bag { transform: rotate(calc(var(--action-gesture) * -5deg)); transform-origin: 50% 15%; }
  .action-icon--bag .action-icon__pill { transform: translateY(calc(var(--action-gesture) * -1px)); }
  .action-icon__bubble { transform: translateY(calc(var(--action-gesture) * -.5px)); }
  .action-icon__dot { transform: translateY(calc(var(--action-gesture) * -1.6px)); }
  .action-icon__dot--second { transition-delay: 40ms; }
  .action-icon__dot--third { transition-delay: 80ms; }
  .action-icon--label .action-icon__pill { transform: rotate(calc(var(--action-gesture) * -8deg)); }
  .action-icon--label .action-icon__paper { transform: translateY(calc(var(--action-gesture) * -.7px)); }
  .action-icon--scroll .action-icon__bead { transform: translateY(calc(var(--action-gesture) * 2.5px)); }
  .action-icon--top .action-icon__bead { transform: translateY(calc(var(--action-gesture) * -2.5px)); }
  .action-icon__orbit { transform: rotate(calc(var(--action-gesture) * 18deg)); }
  .action-icon--turn .action-icon__pill { transform: rotate(calc(var(--action-gesture) * -12deg)); }
  .action-icon--copy .action-icon__paper { transform: translate(calc(var(--action-gesture) * -1px),calc(var(--action-gesture) * 1px)); }
  .action-icon--receipt .action-icon__paper { transform: translateY(calc(var(--action-gesture) * -.6px)); }
  .action-icon__transfer--out { transform: translateX(calc(var(--action-gesture) * 4px)); }
  .action-icon__transfer--in { transform: translateX(calc(var(--action-gesture) * -4px)); }
  .action-icon__flap { transform: translateY(calc(var(--action-gesture) * -1.5px)); }
  .action-icon__lid { transform: translateY(calc(var(--action-gesture) * -1.6px)); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :where(a,button,summary,[role="button"]):not(:disabled):not([aria-disabled="true"]):hover .action-icon { --action-gesture: 1; }
}
@media (prefers-reduced-motion: reduce) {
  svg.action-icon { transform: none !important; }
  .action-icon :is(.action-icon__cap,.action-icon__base,.action-icon__seeds,.action-icon__bag,.action-icon__pill,.action-icon__bubble,.action-icon__dot,.action-icon__paper,.action-icon__bead,.action-icon__orbit,.action-icon__transfer,.action-icon__flap,.action-icon__lid) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .action-icon__seeds { opacity: 0; }
  .immersive-theme .product-quick-view:hover,
  .circle-link:hover { transform: none; }
}