@use '../variables';
@use "../theme/scrollbar.tokens";
@use "../theme/spacing.tokens";

.pa-scrollable-container {
  overflow-y: auto;
  scrollbar-gutter: auto;
}

.pa-scrollable {
  /* Chrome, Edge, and Safari */
  &::-webkit-scrollbar {
    width: scrollbar.$scrollbar-width-mobile;
  }

  &::-webkit-scrollbar-track {
    background: scrollbar.$color-scrollbar-track;
  }

  &::-webkit-scrollbar-thumb {
    background-color: scrollbar.$color-scrollbar-thumb;
    border-radius: scrollbar.$scrollbar-border-radius;
    border: scrollbar.$scrollbar-padding-mobile solid scrollbar.$color-scrollbar-thumb-border;
    min-height: spacing.rhythm(4);
  }

  &.pa-scrolling {
    &::-webkit-scrollbar-thumb {
      background-color: scrollbar.$color-scrollbar-thumb-active;
    }
    &::-webkit-scrollbar-track {
      background: scrollbar.$color-scrollbar-track-active;
    }
  }

  @media (min-width: spacing.$size-viewport-large-min) {
    &::-webkit-scrollbar {
      width: scrollbar.$scrollbar-width-desktop;
    }
    &::-webkit-scrollbar-thumb {
      border: scrollbar.$scrollbar-padding-desktop solid scrollbar.$color-scrollbar-thumb-border;
    }
    &.pa-scrolling::-webkit-scrollbar-thumb {
      border: scrollbar.$scrollbar-padding-desktop solid scrollbar.$color-scrollbar-thumb-border-active;
    }
  }
}