@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(scrollbar) {
  overflow: hidden;
  position: relative;

  @include e(wrap) {
    overflow: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  @include e(thumb) {
    position: absolute;
    background-color: rgba(200, 200, 200, 0.5);
    border-radius: 4px;
    will-change: transform;
    z-index: 1;
    cursor: pointer;

    &:hover {
      background-color: rgba(200, 200, 200, 0.8);
    }

    @include when(moving) {
      background-color: rgba(200, 200, 200, 0.8);
    }

    @include m(y) {
      right: 0;
      top: 0;
      width: 6px;
    }

    @include m(x) {
      bottom: 0;
      left: 0;
      height: 6px;
    }
  }
}

.#{$namespace}-scrollbar-fade {
  &-enter-active {
    transition: opacity 340ms ease-out;
  }

  &-leave-active {
    transition: opacity 120ms ease-out;
  }

  &-enter-from,
  &-leave-active {
    opacity: 0;
  }
}