@import "_vendor-prefixes.less";

.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;

    .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 {
  .c8y-scrollbar;
}