/* listbox */
div[class^="p-listbox-category-"] {
  display: grid;
  grid-auto-columns: min-content;
  grid-auto-flow: column;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;
  gap: 15px;
}

div[class^="p-listbox-category-"] > div[class^="p-listbox-item-"] {
  background-color: lightgray;
  border-radius: 5px;
  padding-top: 1vw;
  padding-right: clamp(12px, 3vw, 35px);
  padding-bottom: 1vw;
  padding-left: clamp(12px, 3vw, 35px);
  display: flex;
  align-items: center;
}
img.p-listbox-img {
  /* min-width: calc(var(--listbox-width) / 1.5); */
  /* min-width: calc(var(--listbox-width) / 2); */
  /* min-height: var(--listbox-height); */
  /* height: calc(var(--listbox-height) / 1.5); */
  min-width: clamp(75px, 15vw, calc(var(--listbox-width) / 2));
  min-height: clamp(1px, 10vw, calc(var(--listbox-height) / 2));
  filter: brightness(0.9);
  transition: 0.3s ease;
}
div[class^="p-listbox-item-"]:hover img.p-listbox-img {
  filter: brightness(1.1);
  scale: 1.1;
}

/*listbox scrollbar*/
div[class^="p-listbox-category-"] {
  padding-bottom: 3px;
}
div[class^="p-listbox-category-"]::-webkit-scrollbar {
  height: 4px;
}
div[class^="p-listbox-category-"]::-webkit-scrollbar-track {
  background: var(--bg-color);
}
div[class^="p-listbox-category-"]::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  /* border-radius: 50px; */
}
div[class^="p-listbox-category-"]:hover::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
}

/* ---------------- */
/* animated listbox */
/* ---------------- */
/* pause on hover */
div.slider:hover .p-listbox-slidetrack {
  animation-play-state: paused;
}
div.slide img,
div.slide {
  transition: 0.5s ease;
}
/* brighten out everything on hover */
div.slider:hover div.slide img {
  filter: brightness(0.25);
  scale: 0.95;
}
div.slider:hover div.slide {
  scale: 0.95;
}
/* except the one hovered — keep it default */
div.slider div.slide:hover img {
  filter: none;
  scale: 1.05;
}
div.slider div.slide:hover {
  scale: 1.05;
}
/* listbox styling */
div.slider div.slide {
  background-color: var(--bg-color-light);
  border-radius: var(--border-radius);
  margin: 0 10px 0 10px;
}
div.slider {
  background: transparent;
  margin: auto;
  overflow: hidden;
  position: relative;
  height: calc(var(--listbox-height) * 1.1);
  display: flex;
  align-items: center;
}
div.slider::before,
div.slider::after {
  background: linear-gradient(
    to right,
    var(--bg-color) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  content: "";
  position: absolute;
  height: calc(var(--listbox-height) * 1.1);
  /* height: var(--listbox-height); */
  width: calc(var(--listbox-width) * 1.1);
  align-self: anchor-center;
  z-index: 2;
  pointer-events: none;
}
div.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
div.slider::before {
  left: 0;
  top: 0;
}
div.p-listbox-slidetrack.slide-left {
  animation: sliderscroll-toleft var(--listbox-duration) linear infinite;
  display: flex;
  width: calc(var(--listbox-width) * (var(--listbox-qty-left) * 2));
}
div.p-listbox-slidetrack.slide-right {
  animation: sliderscroll-toright var(--listbox-duration) linear infinite;
  display: flex;
  width: calc(var(--listbox-width) * (var(--listbox-qty-right) * 2));
}
div.slide {
  height: var(--listbox-height);
  width: var(--listbox-width);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ---------------- */
/* animated listbox */
/* ---------------- */

/* ----------------------- */
/* animated listbox mobile (undone) */
/* ----------------------- */
/* animated listboxes mobile scaling */
@media (max-width: 990px) {
  div.p-listbox-slidetrack.slide-left {
    animation: sliderscroll-toleft-mobile var(--listbox-duration) linear
      infinite;
    width: calc((var(--listbox-width) / 2) * (var(--listbox-qty-left) * 2));
  }
  div.p-listbox-slidetrack.slide-right {
    animation: sliderscroll-toright-mobile var(--listbox-duration) linear
      infinite;
    width: calc((var(--listbox-width) / 2) * (var(--listbox-qty-right) * 2));
  }
  div.p-listbox-slidetrack.slide-left div.slide,
  div.p-listbox-slidetrack.slide-right div.slide {
    height: calc(var(--listbox-height) / 2);
    width: calc(var(--listbox-width) / 2);
  }
  div.p-listbox-slidetrack.slide-left img.p-listbox-img,
  div.p-listbox-slidetrack.slide-right img.p-listbox-img {
    max-width: calc(var(--listbox-width) / 3);
    max-height: calc(var(--listbox-height) / 2);
  }
}
/* ----------------------- */
/* animated listbox mobile (undone) */
/* ----------------------- */