/*
 * Copyright (C) 2026 Fluxer Contributors
 *
 * This file is part of Fluxer.
 *
 * Fluxer is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Fluxer is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
 */

.scrollerWrap {
	--scroller-track-size: 8px;
	position: relative;
	display: flex;
	min-height: 0;
	min-width: 0;
	height: 100%;
	max-height: inherit;
	flex: 1 1 0%;
	padding-inline-end: var(--scroller-track-size);
}

.scroller {
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
	height: 100%;
	max-height: inherit;
	flex: 1 1 0%;
	overscroll-behavior: contain;
	overflow-anchor: none;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg, transparent);
	margin-inline-end: calc(var(--scroller-track-size) * -1);
}

.scroller::-webkit-scrollbar {
	width: var(--scroller-track-size);
	height: var(--scroller-track-size);
}

.scroller::-webkit-scrollbar-track {
	background-color: var(--scrollbar-track-bg, transparent);
}

.scroller::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-bg);
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.scroller::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-thumb-bg-hover);
}

.fade::-webkit-scrollbar-thumb {
	background-color: transparent;
	transition: background-color 0.15s ease-out;
}

.fade::-webkit-scrollbar-track {
	background-color: transparent;
}

.fade:hover::-webkit-scrollbar-thumb,
.fade.scrolling::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-bg);
}

.fade:hover::-webkit-scrollbar-thumb:hover,
.fade.scrolling::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-thumb-bg-hover);
}

.fade {
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.fade:hover,
.fade.scrolling {
	scrollbar-color: var(--scrollbar-thumb-bg) transparent;
}

.horizontal .scroller {
	overscroll-behavior-x: contain;
	overscroll-behavior-y: none;
}

.noScrollbarReserve {
	padding-inline-end: 0;
}

.noScrollbarReserve .scroller {
	margin-inline-end: 0;
	scrollbar-gutter: auto;
}

.noScrollbarReserve.horizontal {
	padding-block-end: 0;
}

.noScrollbarReserve.horizontal .scroller {
	margin-block-end: 0;
}

.scrollerChildren {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.horizontal .scrollerChildren {
	margin-inline-end: 0;
}

.regular {
	--scroller-track-size: 16px;
}

.scroller.regular {
	scrollbar-width: auto;
	scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg, transparent);
}

.regular::-webkit-scrollbar-thumb {
	min-height: 40px;
}

.regular::-webkit-scrollbar-thumb,
.regular::-webkit-scrollbar-track {
	border: 4px solid transparent;
	background-clip: padding-box;
	border-radius: 8px;
}

.windowBlurred {
	scrollbar-color: transparent transparent;
}

.windowBlurred::-webkit-scrollbar-track {
	background-color: transparent;
}

.windowBlurred::-webkit-scrollbar-thumb,
.windowBlurred:hover::-webkit-scrollbar-thumb,
.windowBlurred.scrolling::-webkit-scrollbar-thumb,
.windowBlurred.fade:hover::-webkit-scrollbar-thumb,
.windowBlurred.fade.scrolling::-webkit-scrollbar-thumb {
	background-color: transparent;
}

.horizontal.scrollerWrap {
	padding-inline-end: 0;
	padding-block-end: var(--scroller-track-size);
	height: auto;
	flex: 0 1 auto;
	width: 100%;
}

.horizontal .scroller {
	margin-inline-end: 0;
	margin-block-end: calc(var(--scroller-track-size) * -1);
	height: auto;
	flex: 0 1 auto;
	width: 100%;
}