/* Brand scrollbar - thin thumb in the site blue on the navy track.
   Applies to the page and to any inner scrolling area. */

:root {
  --scrollbar-track: #091030;
  /* navy--400 */
  --scrollbar-thumb: #657cff;
  /* blue--400  */
  --scrollbar-thumb-hover: #8698ff;
  /* blue--300  */
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 8px;
}

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

::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-track);
}