.root {
  position: relative;
}

.track {
  display: flex;
  gap: var(--mantine-spacing-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px;
  margin: -2px;
}

.track::-webkit-scrollbar {
  display: none;
}

.track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;
  z-index: 2;
}

.root:hover .arrow.visible,
.arrow.visible:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.arrow:hover {
  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
}

.arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.arrowLeft {
  left: -14px;
}

.arrowRight {
  right: -14px;
}