.#{$vl}-wrapper {
  position: relative;
  &:hover,
  .always-on {
    .#{$virtual_scrollbar} {
      opacity: 1;
    }
  }
  .vl-window {
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.#{$vg}-wrapper {
  position: relative;
}

.#{$virtual_scrollbar} {
  opacity: 0;
  transition: opacity 340ms ease-out;
  .scrollbar-thumb {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-radius: inherit;
    background-color: map.get($conf_scrollbar, 'bar-color');
    transition: 0.4s background-color;
    &:hover {
      background-color: map.get($conf_scrollbar, 'bar-color-hover');
    }
    &:active {
      background-color: map.get($conf_scrollbar, 'bar-color-active');
    }
  }
}