/* Demo-only fixes on top of SL-WEB-GL's styles (to be fixed in GL itself later). Loaded before GL's stylesheet: every rule here wins by
   specificity, not by order. */

/* /home: PrimeFlex's unlayered .grid (display:flex, margin -0.5rem) beats Tailwind's layered .grid; the -8px side margins of the body row
   overflow the scroll container by 8px, hence a useless horizontal scrollbar. */
app-home > div > .grid {
  margin-inline: 0;
}

/* compact scrollbars: GL draws 8px purple thumbs on a grey track */
:root::-webkit-scrollbar,
:root ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

:root::-webkit-scrollbar-track,
:root ::-webkit-scrollbar-track,
:root::-webkit-scrollbar-corner,
:root ::-webkit-scrollbar-corner {
  background: transparent;
}

:root::-webkit-scrollbar-thumb,
:root ::-webkit-scrollbar-thumb {
  background: var(--purple-200);
  border-radius: 999px;
}

:root::-webkit-scrollbar-thumb:hover,
:root ::-webkit-scrollbar-thumb:hover {
  background: var(--purple-300);
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--purple-200) transparent;
  }
}