/* ==========================================================================
   1. Chrome, Safari, Edge, and Opera (WebKit Browsers)
   ========================================================================== */

/* Width of the vertical scrollbar */
::-webkit-scrollbar {
  width: 16px;
}

/* The track (background) of the scrollbar - Gray with a Black Left Border */
::-webkit-scrollbar-track {
  background-color: #e0e0e0; 
  border-left: 3px solid #000000; /* The vertical black line */
}

/* The draggable thumb */
::-webkit-scrollbar-thumb {
  background-color: #adadad; 
  border-left: 3px solid #000000; /* Keeps the black line continuous */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #8c8c8c; /* Darkens slightly on hover */
}

/* The Up and Down Arrow Buttons */
::-webkit-scrollbar-button:single-button {
  display: block;
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #c2c2c2; /* Gray button background */
  height: 16px;
  border-left: 3px solid #000000; /* Keeps the black line continuous */
}

/* Up Arrow Icon (Using a data URI encoded SVG) */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%231a1a1a'><polygon points='50,20 20,80 80,80'/></svg>");
}

/* Down Arrow Icon */
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%231a1a1a'><polygon points='50,80 20,20 80,20'/></svg>");
}

::-webkit-scrollbar-button:single-button:hover {
  background-color: #a8a8a8; /* Hover effect for buttons */
}


/* ==========================================================================
   2. Firefox Support 
   (Note: Firefox has limited scrollbar button customization)
   ========================================================================== */
html {
  scrollbar-color: #adadad #e0e0e0; /* thumb color | track color */
  scrollbar-width: auto;
}