simple-slider {
  display: block;
  width: 100%;
}

simple-slider ::-webkit-scrollbar {
  height: 0;
  width: 0; /* Remove scrollbar space */
  background: transparent; /* Optional: just make scrollbar invisible */
}

/* simple-slider ::-webkit-scrollbar-thumb {
  background: #ff0000;
} */

simple-slider.last-slide:not([loop]) [data-slider-next],
simple-slider.first-slide:not([loop]) [data-slider-back] {
  opacity: 0.5;
}

simple-slider.last-slide.first-slide.not-scrollable [data-slider-items] {
  justify-content: center;
  margin-left: calc(var(--hh-gutter) * -1);
}

simple-slider [data-slider-items] {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

simple-slider [data-slider-status] {
  white-space: nowrap;
}

.simple-carousel-controls {
  gap: 8px;
}

.simple-carousel-controls button {
  width: 30px;
  height: 30px;
  border: 0;
  padding: 0;
  border-radius: 0;
}

@media (min-width: 768px) {
  .simple-carousel-controls [data-slider-status] {
    display: none;
  }
}

/* Simple slider bar dot animation */

.simple-slider-dot {
  display: block;
  position: relative;
  border: none;
  padding: 0;
  border-radius: 0;
  height: 1px;
  width: 30px;
  background: var(--hh-color-neutral);
  overflow: hidden;
}

.simple-slider-dot:focus {
  border: none;
}

.simple-slider-dot::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 0.0625rem;
  width: 100%;
  transform: translateX(-100%);
  background-color: var(--hh-color-day);
  animation-timing-function: linear;
  animation-duration: var(--promo-animation-speed);
  animation-name: none;
  z-index: 2;
}

.simple-slider-dot.active::after {
  animation-name: dotHorizontal;
}

@keyframes dotHorizontal {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}