@import url('../stru.css');

:root {
  /* taille */
  --sb-size: 12px;
  --sb-radius: 8px;

  /* scrollbar base */
  --sb-track: #EEEEEE;
  --sb-thumb: #666666;
  --sb-thumb-hover: #E36B0A;
  --sb-thumb-active: #E36B0A;

  /* scrollbar colorée */
  --sb-colo-track: #EEEEEE;
  --sb-colo-thumb: var(--coul-modu, #666666);
}

/* gestion dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --sb-track: #EEEEEE;
    --sb-thumb: #666666;
    --sb-thumb-hover: #666666;
    --sb-thumb-active: #666666;
  }
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

html, body {
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* WebKit (Chromium/Edge/Safari) */
*::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}

*::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: var(--sb-radius);
}

*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: var(--sb-radius);
  border: 3px solid var(--sb-track);
}

*::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }
*::-webkit-scrollbar-thumb:active { background: var(--sb-thumb-active); }
*::-webkit-scrollbar-corner { background: var(--sb-track); }

/* Coloration differente suivant le module ouvert */
#page-modu { scrollbar-color: var(--sb-colo-thumb) var(--sb-colo-track) }
#page-modu::-webkit-scrollbar-thumb { background: var(--sb-colo-thumb); }
#page-modu::-webkit-scrollbar-track { background: var(--sb-colo-track); }

/* Coloration differente suivant le module ouvert */
#page-menu { scrollbar-color: var(--them-fonc) var(--sb-colo-track) }
#page-menu::-webkit-scrollbar-thumb { background: var(--sb-them-fonc); }
#page-menu::-webkit-scrollbar-track { background: var(--sb-colo-track); }