@use "../variables" as *;
@use "../utils" as *;

* {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

// prettier-ignore
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;

    scrollbar-color: 
      mvar("scroll.thumb.bg")
      mvar("scroll.track.bg");
  }
}

*:hover {
  &::-webkit-scrollbar-thumb {
    background-color: mvar("scroll.thumb.bg");
  }

  &::-webkit-scrollbar-track {
    background-color: mvar("scroll.track.bg");
  }
}

::-webkit-scrollbar {
  height: $scrollbar-width;
  width: $scrollbar-width;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: $scrollbar-width;
}

::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: $scrollbar-width;
}
