component-scroll {
  display: block;
  position: relative;
  --scroll-button-width: 56px;
}

@media (scripting: enabled) {
  component-scroll {
    visibility: hidden;
  }

  component-scroll.state--ready {
    visibility: visible;
  }
}

component-scroll .scroll-track {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

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

component-scroll .scroll-button {
  display: none;
  transition: opacity 0.2s ease;
}

component-scroll.state--scrollable .scroll-button {
  display: flex;
  position: absolute;
  z-index: 1;
  top: 35%;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(40px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), inset 0 4px 4px rgba(255, 255, 255, 0.12);
  transform: translateY(-50%);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

component-scroll.state--scrollable .scroll-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: none;
  box-shadow: inset 0 4px 4px rgba(255, 255, 255, 0.12);
}

component-scroll .scroll-button svg {
  width: 8px;
  height: auto;
}

component-scroll .scroll-button-left {
  left: 16px;
}

component-scroll .scroll-button-left svg {
  transform: rotate(180deg);
}

component-scroll .scroll-button-right {
  right: 16px;
}

component-scroll .scroll-button.state--hidden {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  component-scroll.state--scrollable .scroll-button {
    display: none;
  }
}

@media (pointer: coarse) {
  *:has(> component-scroll.state--scrollable) {
    padding-inline: 0;
  }

  component-scroll.state--scrollable .scroll-track {
    overscroll-behavior-inline: contain;
    overscroll-behavior-block: auto;
    touch-action: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-gutter, var(--s0));
    padding-inline: var(--container-gutter, var(--s0));
  }

  component-scroll.state--scrollable .scroll-track > * {
    scroll-snap-align: start;
  }

  component-scroll.state--scrollable .scroll-track.scroll--center > * {
    scroll-snap-align: center;
  }
}

@media (pointer: coarse) and (min-width: 768px) {
  component-scroll.state--scrollable .scroll-track.scroll--center {
    scroll-snap-type: none;
  }
}

@media (pointer: fine) {
  component-scroll .scroll-track {
    margin-inline: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(var(--s0) + var(--scrollbar-compensation, 0px));
  }

  component-scroll.state--scrollable .scroll-track {
    cursor: grab;
  }

  component-scroll.state--scrollable.state--dragging .scroll-track,
  component-scroll.state--scrollable.state--dragging .scroll-track * {
    cursor: grabbing;
    user-select: none;
  }
}

component-scroll .scroll-item:first-of-type {
  padding-left: 0;
}

.scroll-dots {
  --worm-dot: 5px;
  --worm-step: 11px;

  display: none;
  position: relative;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin-top: var(--s1);
  margin-right: var(--container-gutter, var(--s1));
  margin-left: auto;
}

.scroll-dots::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc((var(--worm-step) - var(--worm-dot)) / 2 + var(--worm-start, 0) * var(--worm-step));
  width: calc(var(--worm-dot) + (var(--worm-end, 0) - var(--worm-start, 0)) * var(--worm-step));
  height: var(--worm-dot);
  border-radius: 50px;
  background-color: currentColor;
  opacity: 0.55;
  translate: 0 -50%;
  pointer-events: none;
}

@media (max-width: 1023px), (pointer: coarse) {
  .scroll-dots:not(:empty) {
    display: flex;
  }
}

.scroll-dot {
  position: relative;
  flex: none;
  width: var(--worm-step);
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.scroll-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--worm-dot);
  height: var(--worm-dot);
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.18;
  translate: -50% -50%;
}

.scroll-dots--dots {
  gap: var(--s-1);
}

.scroll-dots--dots::after,
.scroll-dots--dots .scroll-dot::before {
  content: none;
}

.scroll-dots--dots .scroll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.45;
  transition: opacity 300ms ease;
}

.scroll-dots--dots .scroll-dot.state--active {
  opacity: 1;
}

.scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.2em;
}

@supports not selector(::-webkit-scrollbar) {
  .scroll {
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
  }
}

.scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

.scroll::-webkit-scrollbar-track {
  background: transparent;
}

@media (pointer: coarse) {
  .scroll-dot::after {
    content: "";
    position: absolute;
    inset: -12px 0;
  }

  .scroll-dots--dots .scroll-dot::after {
    inset: -19px calc(var(--s-1) / -2);
  }
}