@use "./spacing-mixins";

$scrollbar-size: 5px;
$scrollbar-thumb: rgba(var(--inverse-base), 0.2);
$scrollbar-thumb-hover: rgba(var(--inverse-base), 0.6);

@mixin scrollbars {
  ::-webkit-scrollbar {
    width: $scrollbar-size;
    height: $scrollbar-size;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: $scrollbar-thumb;
    border-radius: $scrollbar-size;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: $scrollbar-thumb-hover;
  }
}

// `scrollbars` only reaches descendant scroll areas; this styles an element that
// is itself the scroller
@mixin scrollbars-self {
  scrollbar-width: thin;
  scrollbar-color: $scrollbar-thumb transparent;

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

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

  &::-webkit-scrollbar-thumb {
    background: $scrollbar-thumb;
    border-radius: $scrollbar-size;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: $scrollbar-thumb-hover;
  }
}