@use '../mixins/_media-queries';

@mixin scrollBarStyles() {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: 4px;

  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 16px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }
}

@include media-queries.mq(xs) {
  .isNoMac {
    @include scrollBarStyles;
  }
}

@include media-queries.mq(xs, max) {
  .isNoTouchOnly {
    @include scrollBarStyles;
  }
}
