:root {
  /* DEFAULT SETTINGS - Change this to match your site background */
  --hm-bg-color: #ffffff;
  --hm-arrow-width: 50px;
  --hm-arrow-icon: url("https://erlebnisblog.wird.cool/wp-content/uploads/2025/11/Arrow.svg"); /* Fallback */
}

.hm-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* Hide scrollbars that might pop out */
  display: flex;
  align-items: center;
}

/* The Scrollable Area */
.hm-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  width: 100%;
  -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
  scrollbar-width: none; /* Firefox: hide scrollbar */
  scroll-behavior: smooth;

  /* Paddings that match arrow width so content isn't hidden */
}

.hm-scroll-container .wp-block-navigation-item.wp-block-navigation-link {
  padding-bottom: 5px;
}

/* Hide scrollbar for Chrome/Safari */
.hm-scroll-container::-webkit-scrollbar {
  display: none;
}

/* The Menu List (UL) */
.hm-scroll-container > .hm-menu-list {
  display: flex;
  flex-wrap: nowrap !important;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 20px; /* Space between items */
}

.hm-menu-list li {
  flex: 0 0 auto; /* Don't shrink items */
  display: inline-block;
}

/* The Arrows */
.hm-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--hm-arrow-width);
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  justify-content: center;
  transition: opacity 0.3s ease;
}

/* Gradient Backgrounds */
.hm-left {
  left: 0;
  justify-content: left;
  /* Gradient from Solid Background (left) to Transparent (right) */
  background: linear-gradient(
    to right,
    var(--hm-bg-color) 40%,
    transparent 100%
  );
}

.hm-right {
  right: 0;
  justify-content: right;
  /* Gradient from Transparent (left) to Solid Background (right) */
  background: linear-gradient(to right, transparent 0%, var(--hm-bg-color) 60%);
}

/* The Icon itself */
.hm-arrow .hm-icon {
  display: block;
  width: 20px;
  height: 20px;
  background-image: var(--hm-arrow-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(180deg);
}
.hm-left .hm-icon {
  transform: none;
}