@import '../../../utils'

#root[data-frame-color-scheme="dark"]
  --scroll-progress-height: 1px
  --scroll-progress-bg: #37adef
  --scroll-color: #ffffff36
#root[data-frame-color-scheme="light"]
  --scroll-progress-height: 2px
  --scroll-progress-bg: #178dff
  --scroll-color: #00000036

.ScrollBox
  position: relative
  display: flex
  flex-direction: column
  width: 100%
  height: 100%
  overflow: hidden

// ---
// -- Container of scrollable element
// -
.ScrollBox > .scroll-container
  position: relative
  width: 100%
  height: 100%
  overflow-x: hidden
  overflow-y: auto
  scrollbar-width: none
  scrollbar-color: var(--scroll-color) var(--frame-bg)
#root[data-native-scrollbar="true"] .ScrollBox > .scroll-container
  scrollbar-width: auto
#root[data-native-scrollbar="true"][data-native-scrollbars-thin="true"] .ScrollBox > .scroll-container
  scrollbar-width: thin
#root[data-native-scrollbar="true"][data-native-scrollbars-left="true"]  .ScrollBox > .scroll-container
  direction: rtl
  > .scrollable
    direction: ltr

// ---
// -- Scroll shadows
// -
.ScrollBox > .top-shadow
.ScrollBox > .bottom-shadow
  position: absolute
  width: 100%
  height: 12px
  z-index: 999
  opacity: 0
  transition: opacity var(--d-norm)
  &[data-show="true"]
    opacity: 1

.ScrollBox > .top-shadow
  top: -12px
  left: 0
  box-shadow: 0 1px 0 0 #00000012, 0 1px 12px 0 #00000068

.ScrollBox > .bottom-shadow
  left: 0
  bottom: -12px
  box-shadow: 0 -1px 0 0 #00000012, 0 -1px 12px 0 #00000068

// ---
// -- Progress bar
// -
// .ScrollBox > .progress
//   position: absolute
//   left: -100%
//   width: 100%
//   height: var(--scroll-progress-height)
//   background-color: var(--scroll-progress-bg)
//   z-index: 1000
//   opacity: 0
//   transform: translateZ(0)
//   transition: opacity .3s
//   &[data-scrolling="true"]
//     opacity: .7

// #root[data-native-scrollbar="true"]
//   .ScrollBox > .progress
//     display: none

// ---
// -- Scrollable element
// -
.ScrollBox > .scroll-container > .scrollable
  position: relative
  width: 100%
  min-height: 100%
  // background-color: var(--frame-bg)
