/* Scrollbar Component Styles */

/* ========================================
   Custom Scrollbar - Brand Colors
   ========================================
   Features:
   - 8px width for better usability
   - 20px border radius for fully rounded pill shape
   - Track margins for visual breathing room
   - Border accents that enhance the design
   - Smooth hover transitions
*/
.brand-scrollbar::-webkit-scrollbar {
  width: 8px; /* Increased from 6px for better touch targets */
}

.brand-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track); /* Primary blue track */
  border-radius: 20px; /* Fully rounded pill shape */
  margin: 4px 0; /* Top/bottom spacing for visual separation */
}

.brand-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb); /* Primary orange thumb */
  border-radius: 20px; /* Fully rounded pill shape */
  transition: background-color 0.2s ease; /* Smooth color transitions */
  border: 2px solid var(--scrollbar-border); /* Blue border that complements the track */
}

.brand-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover); /* Darker orange on hover */
  border-color: var(--scrollbar-border); /* Darker border on hover for depth */
}

/* Firefox Scrollbar Styling */
.brand-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); /* Orange thumb, blue track */
}

/* ========================================
   Alternative Scrollbar - Lighter Theme
   ========================================
   Features:
   - Same rounded design as brand scrollbar
   - Light color scheme for subtle components
   - Consistent spacing and border treatment
*/
.light-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.light-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-light-track); /* Light gray track */
  border-radius: 20px; /* Fully rounded pill shape */
  margin: 4px 0;
}

.light-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-light-thumb); /* Medium gray thumb */
  border-radius: 20px; /* Fully rounded pill shape */
  transition: background-color 0.2s ease;
  border: 2px solid var(--scrollbar-light-border); /* Light border for subtle definition */
}

.light-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-light-thumb-hover); /* Darker gray on hover */
  border-color: var(--scrollbar-light-border); /* Darker border on hover */
}

.light-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-light-thumb) var(--scrollbar-light-track);
}

/* ========================================
   Ultra-thin Scrollbar
   ========================================
   Features:
   - Minimal 6px width for subtle appearance
   - Transparent track for invisible integration
   - Semi-transparent thumb for subtle visibility
   - Smaller border radius for proportional design
*/
.thin-scrollbar::-webkit-scrollbar {
  width: 6px; /* Slightly wider than original 4px for usability */
}

.thin-scrollbar::-webkit-scrollbar-track {
  background: transparent; /* Invisible track */
  border-radius: 16px; /* Proportional rounding for 6px width */
  margin: 2px 0; /* Smaller margins for subtle spacing */
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thin-thumb); /* Semi-transparent orange */
  border-radius: 16px; /* Proportional rounding for 6px width */
  transition: background-color 0.2s ease;
  border: 1px solid transparent; /* Transparent border initially */
}

.thin-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thin-thumb-hover); /* More opaque on hover */
  border-color: var(--scrollbar-thin-border); /* Subtle border becomes visible */
}

.thin-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thin-thumb) transparent;
}