.scroll-snap {
  scroll-padding-inline: var(--space-neutral);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.scroll-snap__item {
  scroll-snap-align: start;
}

.scroll-snap-controls {
  background: var(--color-white);
  border-radius: 0.15em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
  ;
  display: none;
  position: absolute;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.scroll-snap-control {
  background-repeat: no-repeat;
  background-size: 0.4375em auto;
  cursor: pointer;
  height: 1.1em;
  transition:
    opacity var(--transition),
    transform var(--transition)
  ;
  width: 1.1em;
}

.scroll-snap-control:disabled {
  opacity: 0.2;
  pointer-events: none;
}

.scroll-snap-control--previous {
  background-image: url('/assets/images/general/icon-previous.svg');
  background-position: left 0.375em center;
}

.scroll-snap-control--next {
  background-image: url('/assets/images/general/icon-next.svg');
  background-position: right 0.375em center;
}



@media(hover: hover) {

  .scroll-snap-controls {
    transition: box-shadow var(--transition);
  }

  .scroll-snap-controls:hover {
    box-shadow:
      0 0 0 1px rgba(var(--rgb-black), 0.85),
      0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
    ;
  }

  .scroll-snap-control {
    will-change: transform;
  }

  .scroll-snap-control--previous:active {
    transform: translateX(-0.03em);
  }

  .scroll-snap-control--next:active {
    transform: translateX(0.03em);
  }

}



@media(min-width: 64em) {

  .scroll-snap-controls {
    display: flex;
  }

}