/* ==========================================================
   SCROLLBAR.CSS
   Theme-aware scrollbars using app-theme.css variables
   ========================================================== */

/*
Expected variables from app-theme.css:
  --scrollbar-background-color    → scrollbar track
  --scrollbar-thumb-color         → scrollbar thumb
  --scrollbar-thumb-hover-color   → thumb hover color
  --scrollbar-border-color        → thumb border
  --scrollbar-corner-color        → corner area
  --default-border-radius         → standard rounding
*/

/* ==========================================================
   WEBKIT SCROLLBARS (Chrome, Edge, Safari)
   ========================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: var(--scrollbar-background-color);
  border-radius: var(--default-border-radius);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border: 1px solid var(--scrollbar-border-color);
  border-radius: var(--default-border-radius);
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover-color);
}

::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-corner-color, var(--body-background-color));
  border-radius: var(--default-border-radius);
}

/* ==========================================================
   FIREFOX SCROLLBARS
   ========================================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-background-color);
}