@import '../mixins/mixins.less';
@import '../mixins/config.less';

.b('ap-scroll-bar', {
  position: relative;
  // z-index: 999;
  background-color:  var(--ap-scroll-bar-background, rgb(0 0 0 / 5%));

  &--horizontal {
    height: 10px;
  }

  &--vertical {
    width: 10px;
    height: 100%;
  }

  &__bar {
    position: absolute;
    border-radius: 8px;
    background-color: rgb(144 147 153 / 30%);
    background-color:  var(--ap-scroll-bar-bar, rgb(144 147 153 / 30%));
    box-shadow: var(--ap-scroll-bar-bar-shadow, inset 0 0 6px rgb(0 0 0 / 20%)); ;

    &--horizontal {
      height: 8px;
      top: 1px;
    }

    &--vertical {
      width: 8px;
      left: 1px;
    }

    &:hover, &:focus, &:active {
      background-color:  var(--ap-scroll-bar-bar-active, rgb(144 147 153 / 50%));
    }
  }
});