/**
 * Peek-a-boo Scroll Hint Styles
 *
 * Provides visual indicators for horizontal scrolling elements.
 */

.rpls-trending-buttons-scroll-wrapper {
  position: relative;
}

/* Right-side gradient overlay */
.rpls-trending-buttons-scroll-wrapper.has-overflow-right::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
  pointer-events: none; /* Allows clicking through the gradient */
  transition: opacity 0.3s ease;
}

/* Left-side gradient overlay */
.rpls-trending-buttons-scroll-wrapper.has-overflow-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2;
}