$scrollbar-width: 4px;
$scrollbar-margin: 2px;

.#{$lib-name}-scroller {
  position: relative;
  overflow: hidden;
  // fix inline-block gap
  line-height: 1px;
  .scroll-area-wrapper {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    &.scroll-transition {
      transition: transform $transition-time;
    }
  }
  .#{$lib-name}-v-scrollbar,
  .#{$lib-name}-h-scrollbar {
    position: absolute;
    z-index: 1;
    box-sizing: content-box;
    .scrollbar-thumb {
      position: relative;
      border-radius: $scrollbar-width;
      background: $border-color-base;
      transition: background-color $transition-time;
      &.scroll-transition {
        transition: transform $transition-time;
      }
      cursor: pointer;
      &:hover {
        background: darken($border-color-base, 10);
      }
    }
  }
  .#{$lib-name}-v-scrollbar {
    top: 0;
    right: 0;
    width: $scrollbar-width;
    height: 100%;
    padding: 0 $scrollbar-margin;
    .scrollbar-thumb {
      top: 0;
      width: 100%;
    }
  }
  .#{$lib-name}-h-scrollbar {
    left: 0;
    bottom: 0;
    width: 100%;
    height: $scrollbar-width;
    padding: $scrollbar-margin 0;
    .scrollbar-thumb {
      left: 0;
      height: 100%;
    }
  }
}