/* 
 * TechSafari Ke - Premium Floating Scrollbar System 
 * Cross-browser fading, custom colored, borderless.
 */

:root {
  /* Dark Mode (Default) */
  --scrollbar-thumb: transparent;
  --scrollbar-active-color: #F5A623;
  --scrollbar-hover-color: #FFC247;
  --scrollbar-dragging-color: #FFB000;
  
  --scrollbar-width: 6px;
  --scrollbar-width-mobile: 4px;
}

html[data-theme="light"],
[data-theme="light"] {
  /* Light Mode */
  --scrollbar-active-color: #D88A00;
  --scrollbar-hover-color: #C97800;
  --scrollbar-dragging-color: #B26A00;
}

/* Firefox Fallback */
html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-active-color) transparent;
}

/* Base Scrollbar Dimension Styling */
::-webkit-scrollbar {
  width: var(--scrollbar-width) !important;
  height: var(--scrollbar-width) !important;
}

@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: var(--scrollbar-width-mobile) !important;
    height: var(--scrollbar-width-mobile) !important;
  }
}

/* Transparent Track */
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent !important;
  border: none !important;
}

/* The Thumb (Pill) */
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb) !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Show the scrollbar when scrolling or hovering */
html.is-scrolling::-webkit-scrollbar-thumb,
body.is-scrolling::-webkit-scrollbar-thumb,
.is-scrolling::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-active-color) !important;
}

/* Real hover & active (dragging) */
html.is-scrolling::-webkit-scrollbar-thumb:hover,
body.is-scrolling::-webkit-scrollbar-thumb:hover,
.is-scrolling::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-hover-color) !important;
}

html.is-scrolling::-webkit-scrollbar-thumb:active,
body.is-scrolling::-webkit-scrollbar-thumb:active,
.is-scrolling::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-dragging-color) !important;
}

/* Always show thumb if JS fails */
.no-js ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-active-color) !important;
}