/* ===========================================================================
   my-ui — полосы прокрутки

   Три вида полос, и у каждой своя роль:

     1. .ui-scroll        — полоса внутри панели (выпадашка, список фильтра,
                            подсказки): 4px, отодвинута от края. Лежит
                            в forms.css, здесь только дополнения.
     2. .ui-bar           — своя полоса СТРАНИЦЫ (page-scrollbar.js):
                            системная спрятана, у правого края тонкий
                            синий ползунок, как на nicol-sky.ru.
     3. .ui-lbar          — свои полосы у списков НА ТЕЛЕФОНЕ
                            (list-scrollbar.js): мобильный WebKit не знает
                            ::-webkit-scrollbar и рисует накладную полосу
                            только на время движения — списки выглядели так,
                            будто прокручивать нечего.

   Атрибут/классы на <html> ставят скрипты: без них своих полос нет,
   и системные не прячутся.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Полосы внутри панелей — цвет ползунка

   Не задавайте scrollbar-color рядом с ::-webkit-scrollbar: Chrome, увидев
   стандартное свойство, переключается в стандартный режим и webkit-правила
   игнорирует целиком. Либо одно, либо другое. Здесь — webkit-правила
   (они дают ширину 4px и поля дорожки), стандартное свойство — только
   там, где нужна одна лишь смена цвета на широкой полосе.
   --------------------------------------------------------------------------- */

/* Прокручиваемая форма в модальном окне: полоса широкая, системная, но
   дорожка не доходит до нижнего скругления окна — иначе бегунок упирается
   в него торцом. */
.ui-modal__body::-webkit-scrollbar-track {
	margin-bottom: 24px;
}

/* ---------------------------------------------------------------------------
   2. Своя полоса страницы (page-scrollbar.js)

   8px, в покое ползунок вдвое уже и в 60% плотности; показывается на время
   прокрутки и гаснет через 1.1 с; под курсором дорожка раскрывается
   на всю ширину, ползунок можно тянуть, по дорожке — кликать.
   Прокрутка при этом нативная: двигается только window, ползунок лишь
   отражает положение — якоря, sticky и клавиатура работают как раньше.
   --------------------------------------------------------------------------- */

html[data-ui-bar] {
	scrollbar-width: none;
}

html[data-ui-bar]::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.ui-bar {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 250;
	width: 8px;
	height: 100%;
	height: 100dvh;
	opacity: 0;
	transition: opacity var(--ui-turn) var(--ui-ease) 0.25s;
}

.ui-bar.is-on,
.ui-bar.is-drag,
.ui-bar:hover {
	opacity: 1;
	transition-delay: 0s;
}

.ui-bar.is-off {
	display: none;
}

/* Дорожка проявляется только под курсором — в покое ползунок висит
   на голом крае */
.ui-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ui-surface-2);
	opacity: 0;
	transform: scaleX(0.5);
	transform-origin: right center;
	transition: opacity var(--ui-slow) var(--ui-ease),
	            transform var(--ui-slow) var(--ui-ease);
}

.ui-bar:hover::before,
.ui-bar.is-drag::before {
	opacity: 1;
	transform: none;
}

.ui-bar__thumb {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 44px;
	will-change: transform;
}

.ui-bar__thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 4px 0 0 4px;
	background: var(--ui-accent);
	opacity: 0.6;
	transform: scaleX(0.5);
	transform-origin: right center;
	transition: transform var(--ui-slow) var(--ui-ease),
	            opacity var(--ui-slow) var(--ui-ease);
}

.ui-bar:hover .ui-bar__thumb::before,
.ui-bar.is-drag .ui-bar__thumb::before {
	opacity: 1;
	transform: none;
}

/* Пока тянут ползунок, текст на странице не выделяется */
.ui-bar-drag,
.ui-bar-drag * {
	user-select: none !important;
}

/* Под открытым меню, листом и окном страница не крутится — полоса ни к чему,
   а поверх окна она висела бы чужим предметом. */
.ui-menu-open .ui-bar,
.ui-menu-lift .ui-bar,
.ui-sheet-open .ui-bar,
.ui-modal-open .ui-bar {
	opacity: 0 !important;
	pointer-events: none;
}

/* На касании тянуть нечем — полоса только показывает, где мы. Уже, всегда
   синяя и видна постоянно: на iPhone своей полосы у страницы иначе не видно.
   (На iOS системная полоса документа при этом остаётся — WebKit не даёт
   её спрятать; она накладная и появляется на время движения.) */
@media (hover: none) {
	.ui-bar {
		width: 4px;
		opacity: 1;
		pointer-events: none;
		transition: none;
	}

	.ui-bar::before {
		display: none;
	}

	.ui-bar__thumb::before {
		border-radius: 2px;
		opacity: 0.85;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   3. Свои полосы у списков на телефоне (list-scrollbar.js)

   Класс ui-lbars на <html> ставит скрипт — на устройствах без курсора
   и на телефонной ширине. Системные полосы у этих списков прячутся, вместо
   них рядом со списком стоит тонкая дорожка с ползунком, видимая всегда.

   Ползунок светлый (--ui-line), не синий кнопок: полоса — служебный знак,
   и синим он спорил с числами и ссылками в самих списках.

   Список списков — тот же, что в SELECTORS у list-scrollbar.js.
   --------------------------------------------------------------------------- */

.ui-lbars .ui-scroll,
.ui-lbars .ui-select__opts,
.ui-lbars .ui-search__list,
.ui-lbars .ui-drop__scroll,
.ui-lbars .ui-filter__children,
.ui-lbars .ui-modal__body,
.ui-lbars .ui-sheet__scroll {
	scrollbar-width: none;
}

.ui-lbars .ui-scroll::-webkit-scrollbar,
.ui-lbars .ui-select__opts::-webkit-scrollbar,
.ui-lbars .ui-search__list::-webkit-scrollbar,
.ui-lbars .ui-drop__scroll::-webkit-scrollbar,
.ui-lbars .ui-filter__children::-webkit-scrollbar,
.ui-lbars .ui-modal__body::-webkit-scrollbar,
.ui-lbars .ui-sheet__scroll::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* Полоса служебная: на телефоне её задача — показать, что список длиннее
   окна, а не занимать место рядом со строками. 2.7px. */
.ui-lbar {
	position: absolute;
	z-index: 3;
	width: 2.7px;
	border-radius: 1.4px;
	background: var(--ui-surface);
	pointer-events: none;
}

.ui-lbar.is-off {
	display: none;
}

.ui-lbar__thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border-radius: 1.4px;
	/* На шаг темнее и синее --ui-line: «чуть-чуть темнее в сторону синего» */
	background: color-mix(in srgb, var(--ui-line) 80%, var(--ui-accent));
	will-change: transform;
}

/* Поля дорожки от краёв списка задаются на самом списке переменными,
   их читает скрипт. Значения по умолчанию — 8px сверху/снизу, 6px от
   правого края; у широких панелей дорожка стоит дальше. Строки при этом
   должны кончаться за 6px до дорожки — добирается padding-right. */
@media (max-width: 900px) {
	.ui-drop__scroll {
		padding-right: 30px;
		--lbar-pad: 22px;
		--lbar-inset: 12px;
	}

	.ui-search__list {
		--lbar-pad: 10px;
		--lbar-inset: 8px;
	}
}


/* Плавная прокрутка (smooth-scroll.js): пока скрипт активен, сглаживание
   только его — иначе браузер сгладит каждый шаг ещё раз и ход станет вязким */
html[data-smooth],
html[data-smooth] body {
	scroll-behavior: auto;
}