/* Modern browsers with `scrollbar-*` support (high priority) */
@supports (scrollbar-width: auto) {
  * {
    scrollbar-color: fixit-var(scrollbar-thumb-color) fixit-var(scrollbar-track-color);
    scrollbar-width: fixit-var(scrollbar-width);

    @include media('print') {
      scrollbar-width: none;
    }
  }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
::-webkit-scrollbar {
  height: fixit-var(scrollbar-width-legacy);
  width: fixit-var(scrollbar-width-legacy);
  overflow: visible;

  @include media('print') {
    display: none;
  }
}
::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
::-webkit-scrollbar-corner {
  background-color: fixit-var(scrollbar-track-color);
}
::-webkit-scrollbar-thumb {
  background-color: fixit-var(scrollbar-thumb-color);
  &:hover {
    background-color: fixit-var(scrollbar-thumb-hover-color);
  }
}
::-webkit-scrollbar-track {
  background-color: fixit-var(scrollbar-track-color);
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  background-clip: padding-box;
  border: 3px solid transparent;
  @include border-radius(full);
}
