/* Have on mind we use Perfect Scrollbar, and these styles are for it */

.ps
  overflow: hidden !important
  -ms-overflow-style: none
  touch-action: auto
  -ms-touch-action: auto

  @supports (-ms-overflow-style: none)
    overflow: auto !important

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
    overflow: auto !important

.ps__rail-x, .ps__rail-y
  position: absolute
  display: none
  opacity: 0.2
  transition: background-color .2s linear, opacity .2s linear

.ps__rail-x
  height: 12px
  bottom: 0

.ps__rail-y
  width: 12px
  right: 0

.ps__thumb-x, .ps__thumb-y
  position: absolute
  background-color: $primaryLight
  border-radius: 6px

  @media screen and (prefers-color-scheme: dark)
    background-color: $secondaryLight

.ps__thumb-x
  height: 8px
  bottom: 2px

.ps__thumb-y
  width: 8px
  right: 2px

.ps:hover > .ps__rail-x, .ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x, .ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x, .ps--scrolling-y > .ps__rail-y
  opacity: 0.5

.ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y
  display: block
  background-color: transparent