svg.ui-icon {
  width: .92em;
  height: .92em;
  display: inline-block;
  flex: 0 0 auto;
  margin-inline-start: .24em;
  overflow: visible;
  color: currentColor;
  vertical-align: -.1em;
  transition: transform .24s ease;
}

svg.ui-icon use { pointer-events: none; }
svg.ui-icon-play { transform: translateX(.06em); }
.play-mark svg.ui-icon,
.sodium-play svg.ui-icon,
.contact-email svg.ui-icon,
svg.shop-card-icon { margin-inline-start: 0; }

:where(a, button):hover svg.ui-icon-arrow-up-right { transform: translate(2px, -2px); }
:where(a, button):hover svg.ui-icon-arrow-right { transform: translateX(2px); }
:where(a, button):hover svg.ui-icon-arrow-down { transform: translateY(2px); }
:where(a, button):hover svg.ui-icon-arrow-up { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  svg.ui-icon { transition: none; }
}