// CSS Scrollbar for webkit/blink browsers
::-webkit-scrollbar {
  width: $scrollbar-width;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-bg, $scrollbar-bg);
  border-radius: $scrollbar-width;
  border: $scrollbar-width / 4 solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-bg-hover, $scrollbar-bg-hover);
  border: $scrollbar-width / 4 - 1 solid transparent;
}

@supports not ((-ms-overflow-style: none) or (-webkit-scrollbar: none)) {
  /* Standard Properties for browsers supporting scrollbar-width */
  .theme-light body * {
    scrollbar-color: inherit;
    scrollbar-width: inherit;
  }

  /* Only for Firefox scrollbar  */
  @-moz-document url-prefix() {
    .theme-light body * {
      scrollbar-color: var(--scrollbar-bg-hover, $scrollbar-bg-hover) transparent;
      scrollbar-width: thin;
    }
  }
}
