@import '@zendeskgarden/css-variables';
@import '_variables';

:root {
  --zd-scrollbar__track-background-color: var(--zd-color-grey-200);
  --zd-scrollbar__track-opacity: .6;
  --zd-scrollbar__track-transition:
    background-color .2s linear,
    opacity .2s linear;
  --zd-scrollbar__track--active-opacity: .9;
}

.c-scrollbar__track,
.c-scrollbar .ps__rail-x,
.c-scrollbar .ps__rail-y {
  display: block;
  position: absolute;
  transition: var(--zd-scrollbar__track-transition);
  opacity: 0;
}

.c-scrollbar__track--horizontal,
.c-scrollbar .ps__rail-x {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--zd-scrollbar__track-size);
}

.c-scrollbar__track--vertical,
.c-scrollbar .ps__rail-y {
  top: 0;
  right: 0;
  width: var(--zd-scrollbar__track-size);
  height: 100%;
}

.c-scrollbar__track.is-scrolling,
.c-scrollbar.ps--scrolling-x .ps__rail-x,
.c-scrollbar.ps--scrolling-y .ps__rail-y,
.c-scrollbar.ps--focus .ps__rail-x,
.c-scrollbar.ps--focus .ps__rail-y {
  opacity: var(--zd-scrollbar__track-opacity);
}

.c-scrollbar__track:--scrollbar-active,
.c-scrollbar .ps__rail-x:--scrollbar-active,
.c-scrollbar .ps__rail-y:--scrollbar-active {
  opacity: var(--zd-scrollbar__track--active-opacity);
  background-color: var(--zd-scrollbar__track-background-color);
}

.c-scrollbar.is-rtl .c-scrollbar__track--horizontal {
  right: 0;
  left: auto;
}

.c-scrollbar.is-rtl .c-scrollbar__track--vertical {
  right: auto;
  left: 0;
}