.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

.scroll-area-viewport {
  scroll-timeline-name: --scrollShadowContainer;

  .scroll-header {
    @apply pointer-events-none top-[0px] z-10 right-0 left-0 h-[0.5px] w-full sticky;
    /* Start completely transparent */
    background-color: transparent;
    /* Use a more conservative animation approach */
    animation-name: scrollShowAnimation;
    animation-duration: 1ms; /* Firefox requires this to apply the animation */
    animation-timeline: --scrollShadowContainer;
    animation-range: 1px 85px; /* Start at 5px to ensure scrolling has actually occurred */
    animation-fill-mode: both; /* Use 'both' instead of 'forwards' for better control */
  }
}

.scrollbar-thin {
  /* Webkit scrollbar styling */
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-border);
    opacity: 0.5;
    border-radius: 2px;
  }

  /* Firefox scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-border) 50%, transparent)
    transparent;
}

@keyframes scrollShowAnimation {
  0% {
    background-color: transparent;
    opacity: 0;
  }
  100% {
    background-color: var(--color-border);
    opacity: 1;
  }
}

.search-bold {
  .keyword {
    @apply font-semibold;
  }
}
