@use '../variables/variables-colors' as bf-v-color;
@use '../variables/variables-texts' as bf-v-text;
@use '../variables/variables-spacing' as bf-v-space;
@use '../variables/variables-breakpoints' as bf-v-bp;
@use 'sass:color';

// standard property
// 'scrollbar-color'
// https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
html {
  scrollbar-color: color.adjust(bf-v-color.$bf-gray-dark, $lightness: -5%)
    bf-v-color.$bf-dark-extra;
}

// these features are not standard, and blink and webkit only
// '::-webkit-scrollbar'
// https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

::-webkit-scrollbar {
  width: 1.5rem;
  height: 1.5rem;
}

::-webkit-scrollbar-track {
  background-color: bf-v-color.$bf-dark-extra;
}

::-webkit-scrollbar-thumb {
  background-color: color.adjust(bf-v-color.$bf-gray-dark, $lightness: -5%);
}

::-webkit-scrollbar-thumb:hover {
  background-color: color.adjust(bf-v-color.$bf-gray-dark, $lightness: 10%);
}