@import './mixins/mixins.scss';

@include themes-mixin {
  @include b(scrollbar) {
    @include once {
      position: relative;
      z-index: auto;
      height: 100%;
    }
    & > {
      @include once {
        @include b(scrollbar-container) {
          width: 100%;
          overflow: scroll;
          height: 100%;
          max-height: inherit;
          scrollbar-width: none;
          &::-webkit-scrollbar {
            width: 0;
            height: 0;
          }
          & > {
            @include b(scrollbar-content) {
              width: fit-content;
              overflow: hidden;
              min-width: 100%;
            }
          }
        }
      }
      @include b(scrollbar-rail) {
        @include once {
          position: absolute;
          user-select: none;
          @include m(horizontal) {
            left: 0;
            right: 0;
            bottom: 2.5px;
            & > {
              @include e(scrollbar) {
                right: 0;
              }
            }
          }
          @include m(vertical) {
            right: 2.5px;
            top: 0;
            bottom: 0;
            & > {
              @include e(scrollbar) {
                bottom: 0;
              }
            }
          }
        }
        @include m(disabled) {
          pointer-events: none;
        }
        & > {
          @include e(scrollbar) {
            @include once {
              @include fade-in-transition(scrollbar);
              position: absolute;
              cursor: pointer;
            }
            background-color: map-get($--scrollbar-background-color, 'default');
            transition: background-color .2s $--n-ease-in-out-cubic-bezier;
            &:hover {
              background-color: map-get($--scrollbar-background-color, 'hover');
            }
          }
        }
      }
    }
  }
}