@use 'colors/colors' as colors;
/** 
 * Scroll bars
 */

.ngx-scroll,
.ngx-scroll-overlay,
.ngx-scroll-muted,
.ngx-scroll * {
  &::-webkit-scrollbar {
    width: 13px;
    height: 13px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
    margin: 0;
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-clip: padding-box;
    border: 4px solid transparent;
  }

  &::-webkit-scrollbar-button,
  &::-webkit-scrollbar-track-piece,
  &::-webkit-scrollbar-corner,
  &::-webkit-resizer {
    display: none;
  }
}

.ngx-scroll,
.ngx-scroll *,
.ngx-scroll-overlay {
  &::-webkit-scrollbar-thumb {
    background-color: rgba(colors.$color-blue-grey-550, 0.5);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(colors.$color-blue-grey-550, 1);
  }
}

.ngx-scroll-overlay {
  overflow: auto; // for FF
  overflow: overlay;
  -ms-overflow-style: -ms-autohiding-scrollbar;

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

  &:hover::-webkit-scrollbar {
    display: initial;
  }
}

.ngx-scroll-muted {
  overflow: auto; // for FF
  overflow: overlay;

  &::-webkit-scrollbar-thumb {
    background-color: rgba(colors.$color-blue-grey-550, 0.3);
  }

  &:hover::-webkit-scrollbar-thumb {
    background-color: rgba(colors.$color-blue-grey-550, 0.5);
  }

  &:hover::-webkit-scrollbar-thumb:hover {
    background-color: rgba(colors.$color-blue-grey-550, 1);
  }
}