/* ==========================================================================
   MotoJoy — mobile scroller navigation

   The arrows and position markers assets/js/scroller-nav.js builds under the
   feature grid and product rail swipe rows. Registered as a shared style
   handle that both blocks name in block.json.

   Arrows carry the card edge and hard shadow; markers are square (zero
   radius, design-system.md §6) and the current one stretches into a brand
   bar. Desktop never shows the row.
   ========================================================================== */

.mj-scroller-nav {
  display: none;
}

/* Literal breakpoint — media-query conditions cannot read custom properties.
   Matches the swipe-row breakpoint in both block stylesheets. */
@media (max-width: 599px) {
  .mj-scroller-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--4);
    margin-block-start: var(--wp--preset--spacing--3);
    padding-inline: var(--wp--preset--spacing--3);
  }

  .mj-scroller-nav[hidden] {
    display: none;
  }
}

.mj-scroller-nav__arrow {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--wp--preset--color--ink);
  font-size: 1.5rem;
  line-height: 1;
  background-color: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: 0;
  box-shadow: var(--wp--preset--shadow--hard);
  cursor: pointer;
}

.mj-scroller-nav__arrow:hover {
  background-color: var(--wp--preset--color--surface);
}

.mj-scroller-nav__arrow:focus-visible {
  outline: var(--wp--custom--focus-ring-width) solid var(--wp--preset--color--focus);
  outline-offset: var(--wp--custom--focus-ring-offset);
}

.mj-scroller-nav__arrow:disabled {
  color: var(--wp--preset--color--text-muted);
  border-color: var(--wp--preset--color--rule);
  box-shadow: none;
  cursor: default;
}

.mj-scroller-nav__markers {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2);
}

.mj-scroller-nav__marker {
  width: 8px;
  height: 8px;
  background-color: var(--wp--preset--color--rule);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.mj-scroller-nav__marker.is-active {
  width: 24px;
  background-color: var(--wp--preset--color--brand);
}

@media (prefers-reduced-motion: reduce) {
  .mj-scroller-nav__marker {
    transition: none;
  }
}