/* Adapted from React Bits "Magnet" – https://reactbits.dev – Copyright (c) 2026 David Haz.
   MIT + Commons Clause (see react-bits/LICENSE.md). Ported to vanilla JS for Amergin Commerce; not for redistribution as a component. */

/* Magnet. magnet.js adds .rb-magnet to the enhanced element, writes --rb-magnet-x / --rb-magnet-y
   while it is pulled and adds .rb-magnet--live; both go again once it is back at rest.
   The individual `translate` property is used on purpose: it adds to any `transform` the theme or GSAP
   sets instead of replacing it, and with no pull there is no translate at all (no stacking context).
   The component has no colours of its own; focus, hover and colours stay with the element's own styles.

   Tunable from the theme:
     --rb-magnet-label   how much further an optional .rb-magnet__label child moves, as a share of the
                         element's own shift (0 = moves with the element, 0.35 = default depth) */

.rb-magnet {
  --rb-magnet-label: 0.35;
}

.rb-magnet--live {
  translate: var(--rb-magnet-x, 0px) var(--rb-magnet-y, 0px);
}

/* Optional inner label for a touch of depth: <a class="btn btn--primary"><span class="rb-magnet__label">…</span></a>.
   Inline boxes ignore `translate`, so the label becomes an inline-block. */
.rb-magnet__label {
  display: inline-block;
}

.rb-magnet--live .rb-magnet__label {
  translate:
    calc(var(--rb-magnet-x, 0px) * var(--rb-magnet-label))
    calc(var(--rb-magnet-y, 0px) * var(--rb-magnet-label));
}

/* magnet.js already stays idle here; this also covers a preference changed mid-pull */
@media (prefers-reduced-motion: reduce) {
  .rb-magnet--live,
  .rb-magnet--live .rb-magnet__label {
    translate: none;
  }
}