:root {
  --app-scrollbar-size: 11px;
  --app-scrollbar-thin-size: 9px;
  --app-scrollbar-radius: 999px;
  --app-scrollbar-track: transparent;
  --app-scrollbar-thumb: rgba(120, 120, 120, 0.42);
  --app-scrollbar-thumb-subtle: rgba(120, 120, 120, 0.28);
  --app-scrollbar-thumb-hover: rgba(105, 105, 105, 0.62);
  --app-scrollbar-thumb-active: rgba(85, 85, 85, 0.72);
  --app-scrollbar-border-size: 3px;
  --app-scrollbar-thumb-border: 3px solid transparent;
}

.dark {
  --app-scrollbar-thumb: rgba(166, 166, 166, 0.38);
  --app-scrollbar-thumb-subtle: rgba(166, 166, 166, 0.24);
  --app-scrollbar-thumb-hover: rgba(188, 188, 188, 0.58);
  --app-scrollbar-thumb-active: rgba(210, 210, 210, 0.68);
}

:root,
body,
#root,
:where(*) {
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  scrollbar-width: thin;
}

:root::-webkit-scrollbar,
body::-webkit-scrollbar,
#root::-webkit-scrollbar,
:where(*)::-webkit-scrollbar {
  width: var(--app-scrollbar-size) !important;
  height: var(--app-scrollbar-size) !important;
  background-color: var(--app-scrollbar-track) !important;
}

:root::-webkit-scrollbar-track,
:root::-webkit-scrollbar-corner,
body::-webkit-scrollbar-track,
body::-webkit-scrollbar-corner,
#root::-webkit-scrollbar-track,
#root::-webkit-scrollbar-corner,
:where(*)::-webkit-scrollbar-track,
:where(*)::-webkit-scrollbar-corner {
  background-color: var(--app-scrollbar-track) !important;
}

:root::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#root::-webkit-scrollbar-thumb,
:where(*)::-webkit-scrollbar-thumb {
  min-height: 36px !important;
  min-width: 36px !important;
  border: var(--app-scrollbar-thumb-border) !important;
  border-radius: var(--app-scrollbar-radius) !important;
  background-color: rgba(120, 120, 120, 0.42) !important;
  background-color: var(--app-scrollbar-thumb) !important;
  background-clip: content-box !important;
}

:root::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
#root::-webkit-scrollbar-thumb:hover,
:where(*)::-webkit-scrollbar-thumb:hover {
  background-color: rgba(105, 105, 105, 0.62) !important;
  background-color: var(--app-scrollbar-thumb-hover) !important;
  background-clip: content-box !important;
}

:root::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
#root::-webkit-scrollbar-thumb:active,
:where(*)::-webkit-scrollbar-thumb:active {
  background-color: rgba(85, 85, 85, 0.72) !important;
  background-color: var(--app-scrollbar-thumb-active) !important;
  background-clip: content-box !important;
}

:root::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
#root::-webkit-scrollbar-button,
:where(*)::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.scrollbar-none,
.scrollbar-hidden {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.scrollbar-none::-webkit-scrollbar,
.scrollbar-hidden::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  overflow: auto;
}

.custom-scrollbar::-webkit-scrollbar {
  width: var(--app-scrollbar-size) !important;
  height: var(--app-scrollbar-size) !important;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: var(--app-scrollbar-track) !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  border: var(--app-scrollbar-thumb-border) !important;
  border-radius: var(--app-scrollbar-radius) !important;
  background-color: rgba(120, 120, 120, 0.42) !important;
  background-color: var(--app-scrollbar-thumb) !important;
  background-clip: content-box !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(105, 105, 105, 0.62) !important;
  background-color: var(--app-scrollbar-thumb-hover) !important;
  background-clip: content-box !important;
}

.custom-scrollbar::-webkit-scrollbar-corner {
  background-color: var(--app-scrollbar-track) !important;
}

.custom-scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  overflow: auto;
}

.custom-scrollbar-thin::-webkit-scrollbar {
  width: var(--app-scrollbar-thin-size) !important;
  height: var(--app-scrollbar-thin-size) !important;
}

.custom-scrollbar-thin::-webkit-scrollbar-track {
  background-color: transparent !important;
}

.custom-scrollbar-thin::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: var(--app-scrollbar-radius) !important;
  background-color: rgba(120, 120, 120, 0.42) !important;
  background-color: var(--app-scrollbar-thumb) !important;
  background-clip: content-box !important;
}

.custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: rgba(105, 105, 105, 0.62) !important;
  background-color: var(--app-scrollbar-thumb-hover) !important;
  background-clip: content-box !important;
}

.custom-scrollbar-auto {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  overflow: auto;
}

.custom-scrollbar-auto::-webkit-scrollbar {
  width: var(--app-scrollbar-size) !important;
  height: var(--app-scrollbar-size) !important;
}

.custom-scrollbar-auto::-webkit-scrollbar-track {
  background-color: transparent !important;
}

.custom-scrollbar-auto::-webkit-scrollbar-thumb {
  border: var(--app-scrollbar-thumb-border) !important;
  border-radius: var(--app-scrollbar-radius) !important;
  background-color: rgba(120, 120, 120, 0.28) !important;
  background-color: var(--app-scrollbar-thumb-subtle) !important;
  background-clip: content-box !important;
}

.custom-scrollbar-auto:hover::-webkit-scrollbar-thumb {
  background-color: rgba(120, 120, 120, 0.42) !important;
  background-color: var(--app-scrollbar-thumb) !important;
  background-clip: content-box !important;
}

.custom-scrollbar-auto::-webkit-scrollbar-thumb:hover {
  background-color: rgba(105, 105, 105, 0.62) !important;
  background-color: var(--app-scrollbar-thumb-hover) !important;
  background-clip: content-box !important;
}

.custom-scrollbar-auto::-webkit-scrollbar-corner {
  background-color: transparent !important;
}

.editor-scrollable {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  overscroll-behavior: none;
}

.editor-scrollable::-webkit-scrollbar {
  width: var(--app-scrollbar-thin-size) !important;
  height: var(--app-scrollbar-thin-size) !important;
}

.editor-scrollable::-webkit-scrollbar-track {
  background-color: transparent !important;
}

.editor-scrollable::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: var(--app-scrollbar-radius) !important;
  background-color: rgba(120, 120, 120, 0.28) !important;
  background-color: var(--app-scrollbar-thumb-subtle) !important;
  background-clip: content-box !important;
}

.editor-scrollable:hover::-webkit-scrollbar-thumb {
  background-color: rgba(120, 120, 120, 0.42) !important;
  background-color: var(--app-scrollbar-thumb) !important;
  background-clip: content-box !important;
}

.editor-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: rgba(105, 105, 105, 0.62) !important;
  background-color: var(--app-scrollbar-thumb-hover) !important;
  background-clip: content-box !important;
}

.editor-scrollable::-webkit-scrollbar-corner {
  background-color: transparent !important;
}

.custom-scrollbar,
.custom-scrollbar-thin,
.custom-scrollbar-auto {
  scroll-behavior: smooth;
  overscroll-behavior: none !important;
}

/* .editor-scrollable intentionally does NOT use scroll-behavior: smooth for instant scrolling feedback */

.tab-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.tab-scroll-container::-webkit-scrollbar {
  height: var(--app-scrollbar-thin-size) !important;
}

.tab-scroll-container::-webkit-scrollbar-track {
  background-color: transparent !important;
}

.tab-scroll-container::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: var(--app-scrollbar-radius) !important;
  background-color: rgba(120, 120, 120, 0.42) !important;
  background-color: var(--app-scrollbar-thumb) !important;
  background-clip: content-box !important;
}

.tab-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(105, 105, 105, 0.62) !important;
  background-color: var(--app-scrollbar-thumb-hover) !important;
  background-clip: content-box !important;
}

.tab-scroll-container:hover::-webkit-scrollbar-thumb {
  background-color: rgba(120, 120, 120, 0.42) !important;
  background-color: var(--app-scrollbar-thumb) !important;
  background-clip: content-box !important;
}

.tab-scroll-container > * {
  flex-shrink: 0;
}
