@aplus-frontend/ui/theme/scroll-bar/index.less

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

@bar: ~'@{ns}-scroll-bar__bar--disabled';
@bc: ~'--@{ns}-scroll-bar-bar-color';
@tc: ~'--@{ns}-scroll-bar-track-color';
@bw: ~'--@{ns}-scroll-bar-bar-width';
@tw: ~'--@{ns}-scroll-bar-track-width';

.b('scroll-bar', {
  position: relative;

  &--horizontal {
    width: 100%;
    height: var(@tw, 10px);
  }

  &--vertical {
    width: var(@tw, 10px);
    height: 100%;
  }

  &__track {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    inset-inline-start: 0;
    cursor: pointer;
    background-color:  var(@tc, #F2F2F2);
    &--disabled {
      pointer-events: none;
      background-color: #FAFAFA;
    }
    &--hidden {
      pointer-events: none;
      background-color: transparent;
    }
  }

  &__bar {
    position: absolute;
    border-radius: var(@bw, 8px);
    background-color:  var(@bc, #c7c8cc);
    cursor: pointer;

    &--disabled {
      pointer-events: none;
      box-shadow: none;
    }

    &--horizontal {
      height: var(@bw, 8px);
      top: calc(var(@tw, 10px) / 2 - var(@bw, 8px) / 2);
    }

    &--vertical {
      width: var(@bw, 8px);
      left: calc(var(@tw, 10px) / 2 - var(@bw, 8px) / 2);
    }
  }
});