// By design, scrollbar styles are only applied to the top level scroller.
// Note that the nonstandard -webkit-* version cannot be "unset,"
// which is inconvenient. But it also doesn't cascade, so we can
// use that to our advantage.
//
// See: https://superuser.com/a/417750

//
// Firefox
//

html {
  // Firefox 64+
  // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
  scrollbar-color: var(--scrollbar-face-color) var(--scrollbar-track-color);
}

body {
  // reset firefox styles so they don't cascade past HTML
  scrollbar-color: initial;
}

//
// Chrome/Safari
//

body {

  &::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-height);
  }

  &::-webkit-scrollbar-thumb {
    background: var(--scrollbar-face-color);
    border-radius: var(--scrollbar-border-radius);
  }

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

  &::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-face-color-active);
  }

  &::-webkit-scrollbar-track, &::-webkit-scrollbar-track:hover, &::-webkit-scrollbar-track:active {
    background: var(--scrollbar-track-color);
  }

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

}