/* 
  Custom scrollbar styling that provides a refined, modern look
  while maintaining consistency with the dark theme.
*/

.custom-scrollbar {
  /* Enable smooth scrolling behavior for a better user experience */
  scroll-behavior: smooth;
  /* Hide default scrollbar in Firefox */
  scrollbar-width: thin;
  /* Set initial scrollbar colors for Firefox */
  scrollbar-color: rgba(75, 75, 75, 0.5) rgba(28, 28, 28, 0.1);
}

/* Main scrollbar styling for Webkit browsers */
.custom-scrollbar::-webkit-scrollbar {
  /* Keep the scrollbar height subtle but visible */
  height: 6px;
  /* Add some padding around the scrollbar */
  margin-top: 4px;
}

/* The track (background) of the scrollbar */
.custom-scrollbar::-webkit-scrollbar-track {
  /* Subtle, slightly transparent background */
  background: rgba(28, 28, 28, 0.1);
  /* Rounded edges for a modern look */
  border-radius: 4px;
  /* Add a slight border for definition */
  border: 1px solid rgba(75, 75, 75, 0.1);
  /* Inner shadow for depth */
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}

/* The draggable scrolling element */
.custom-scrollbar::-webkit-scrollbar-thumb {
  /* Semi-transparent thumb for a glass-like effect */
  background: rgba(75, 75, 75, 0.5);
  /* Rounded edges matching the track */
  border-radius: 4px;
  /* Subtle gradient for depth */
  background-image: linear-gradient(
    to bottom,
    rgba(75, 75, 75, 0.6),
    rgba(75, 75, 75, 0.4)
  );
  /* Smooth transition for hover effects */
  transition: background-color 0.3s ease;
}

/* Hover state for the thumb */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  /* Lighter color on hover for better feedback */
  background: rgba(100, 100, 100, 0.6);
  /* Enhanced gradient on hover */
  background-image: linear-gradient(
    to bottom,
    rgba(100, 100, 100, 0.7),
    rgba(100, 100, 100, 0.5)
  );
}

/* Active state when scrollbar is being dragged */
.custom-scrollbar::-webkit-scrollbar-thumb:active {
  /* Darker color when active for pressed state feedback */
  background: rgba(120, 120, 120, 0.7);
}