packages/styles/scss/base/_scrollbar.scss

   1 @use 'sass:math';
   2
   3 @if $custom-scroll {
   4         html:not(.feature-scrollbars-off) {
   5                 * {
   6                         @supports (scrollbar-width: auto) {
   7                                 scrollbar-width: thin;
   8                                 scrollbar-color: var(--scrollbar-thumb-color) transparent;
   9                         }
  10
  11                         @supports selector(::-webkit-scrollbar) {
  12                                 $real-size: rem(6) + (rem(2) * 2);
  13
  14                                 &::-webkit-scrollbar {
  15                                         inline-size: $real-size;
  16                                         block-size: $real-size;
  17                                 }
  18
  19                                 &::-webkit-scrollbar-thumb {
  20                                         border: rem(2) solid transparent;
  21                                         background-clip: padding-box;
  22                                         border-radius: math.div($real-size, 2);
  23                                         background-color: var(--scrollbar-thumb-color);
  24                                 }
  25
  26                                 &::-webkit-scrollbar-track {
  27                                         background-color: transparent;
  28                                 }
  29
  30                                 &::-webkit-scrollbar-corner {
  31                                         visibility: hidden;
  32                                 }
  33                         }
  34                 }
  35
  36                 @include media('mouse') {
  37                         body *:not(:hover, :focus, :focus-within) {
  38                                 @supports (scrollbar-width: auto) {
  39                                         scrollbar-color: transparent transparent;
  40                                 }
  41
  42                                 @supports selector(::-webkit-scrollbar) {
  43                                         &::-webkit-scrollbar-thumb {
  44                                                 visibility: hidden;
  45                                         }
  46                                 }
  47                         }
  48                 }
  49         }
  50 }