@use "../../variables/index" as *;
@use "vendor-prefixes";

@mixin c8y-scrollbar {
  &::-webkit-scrollbar {
    width: 4px; /* for vertical scrollbars */
    height: 4px; /* for horizontal scrollbars */
  }

  &::-webkit-scrollbar-track {
    background: $component-scrollbar-track;
  }
  &::-webkit-scrollbar-thumb {
    width: 4px;
    border-radius: 1px;
    background: $component-scrollbar-thumb-default;

    @include vendor-prefixes.transition(all 0.25s ease);
  }
  scrollbar-width: thin; /* for Firefox */
  scrollbar-color: $component-scrollbar-thumb-default transparent;
  transition: scrollbar-color .2s ease;
  &:hover {
    &::-webkit-scrollbar-thumb {
      background: $component-scrollbar-thumb-hover;
    }
    scrollbar-color: $component-scrollbar-thumb-hover transparent;
  }
}

.c8y-scrollbar {
  @include c8y-scrollbar;
}