/**
 * Scrollbar Styling - Theme-Compliant
 *
 * Provides theme-compliant scrollbar styling for all scrollable content in Shell.
 * Supports both WebKit (Chrome, Safari, Edge) and Firefox browsers.
 *
 * Theme Colors:
 * - Track: --theme-background (background color)
 * - Thumb: --theme-ui (UI color)
 * - Thumb Hover: --theme-text (inverse video effect)
 */

/* ============================================
   WebKit Scrollbar Styling
   (Chrome, Safari, Edge)
   ============================================ */

/* Scrollbar Track (background/gutter) */
::-webkit-scrollbar {
  width: 12px;  /* Vertical scrollbar width */
  height: 12px; /* Horizontal scrollbar height */
  background: var(--theme-background, #000000);
}

/* Scrollbar Track (the gutter) */
::-webkit-scrollbar-track {
  background: var(--theme-background, #000000);
  border: none;
}

/* Scrollbar Thumb (draggable bar) */
::-webkit-scrollbar-thumb {
  background: var(--theme-ui, #00FF00);
  border: none;
  border-radius: 0;
}

/* Scrollbar Thumb Hover (inverse video effect) */
::-webkit-scrollbar-thumb:hover {
  background: var(--theme-text, #00FF00);
}

/* Scrollbar Corner (where horizontal and vertical meet) */
::-webkit-scrollbar-corner {
  background: var(--theme-background, #000000);
}

/* ============================================
   Firefox Scrollbar Styling
   ============================================ */

/* Firefox scrollbar styling for all scrollable elements */
/* Note: Firefox doesn't support :hover on scrollbar-color via CSS */
/* The hover effect (inverse video) works in WebKit browsers only */
* {
  scrollbar-width: thin; /* Options: auto, thin, none */
  scrollbar-color: var(--theme-ui, #00FF00) var(--theme-background, #000000);
}