/**
 * Native CSS scroll markers for ProductPageGallery (CSS Overflow Module Level 5).
 * Served as a static asset so Lightning CSS minification does not strip or warn on
 * experimental ::scroll-marker / scroll-marker-group syntax (Chrome 135+).
 * Unsupported browsers ignore these rules and use the JS fallback rail instead.
 *
 * Geometry and paint come from Figma 3274:63815: a 4px-wide vertical rail inset 16px from the
 * inline end and centred on the slide — active slide a 12px pill, the rest 4px dots, 10px apart.
 * The rail paints solid gray-100 (#212427) — the file is a static asset, so Tailwind tokens do not
 * reach it and the colour stays a literal. No mix-blend-mode: an earlier revision read the Figma
 * vector as white + difference, which paints a white rail in the app where the design shows black.
 *
 * Keep this file visually in sync with the .gallery-dots-fallback rail in ProductPageGallery.vue —
 * the two render the same rail for different browsers.
 */

.gallery-scroll.gallery-scroll--markers {
  scroll-marker-group: after;
}

.gallery-scroll::scroll-marker-group {
  position: absolute;
  top: 50%;
  /* Logical inset mirrors for RTL with no dir-specific rule. */
  inset-inline-end: 16px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 10;
}

.gallery-slide::scroll-marker {
  content: '';
  width: 4px;
  height: 4px;
  box-sizing: border-box;
  border-radius: 9999px;
  background: #212427;
  opacity: 0.8;
  transition:
    height 0.2s,
    opacity 0.2s;
}

.gallery-slide::scroll-marker:target-current {
  height: 12px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-slide::scroll-marker {
    transition: none;
  }
}

@supports (scroll-marker-group: after) {
  /* Doubled class for specificity (0,2,0): this file is served as a static asset and is therefore
     linked before Tailwind's stylesheet, so a single `.gallery-dots-fallback` (0,1,0) ties with
     Tailwind's `.flex` and loses on source order — leaving both rails painted on top of each
     other. Doubling the class wins the cascade without resorting to !important. */
  .gallery-dots-fallback.gallery-dots-fallback {
    display: none;
  }
}