Arrow Slide

<!-- Arrow Slide — arrow icon slides in on hover -->
<button class="nuda-arrow-slide">
  <span class="nuda-arrow-slide__label">Arrow Slide</span>
  <span class="nuda-arrow-slide__arrow" aria-hidden="true">&rarr;</span>
</button>

/* ── Arrow Slide ─────────────────────────────────────────────
   Customize:
     --nuda-as-bg      : button background
     --nuda-as-clr     : text color
     --nuda-as-speed   : slide speed
     --nuda-as-offset  : arrow slide distance
   ──────────────────────────────────────────────────────────── */
.nuda-arrow-slide {
  --nuda-as-bg: #6366f1;
  --nuda-as-clr: #fff;
  --nuda-as-speed: 0.3s;
  --nuda-as-offset: 6px;

  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nuda-as-clr);
  background: var(--nuda-as-bg);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}

.nuda-arrow-slide__arrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(calc(-1 * var(--nuda-as-offset)));
  transition:
    transform var(--nuda-as-speed) ease,
    opacity var(--nuda-as-speed) ease;
}

.nuda-arrow-slide:hover .nuda-arrow-slide__arrow {
  opacity: 1;
  transform: translateX(0);
}

.nuda-arrow-slide:hover .nuda-arrow-slide__label {
  transform: translateX(calc(-1 * var(--nuda-as-offset) / 2));
}

.nuda-arrow-slide__label {
  transition: transform var(--nuda-as-speed) ease;
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-arrow-slide__arrow,
  .nuda-arrow-slide__label {
    transition: none;
  }
  .nuda-arrow-slide__arrow {
    opacity: 1;
    transform: none;
  }
}