/* «Слайдер брендов». Кольори - змінні теми з запасними значеннями, тож модуль працює і без неї. */
.bs-brands {
	--bs-gap: 2.5rem;
	--bs-bg: var(--pr-white-color, #fff);
	--bs-text: var(--pr-black-color, #121715);
	--bs-accent: var(--pr-interactive-color, currentColor);
	--bs-border: var(--pr-border-color, rgba(0, 0, 0, .1));
	margin-top: 1.5rem;
	color: var(--bs-text);
}

.bs-brands__title {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}

.bs-brands__body {
	position: relative;
	display: flex;
	align-items: center;
	padding: 1rem;
	background: var(--bs-bg);
	border-radius: .75rem;
}

.bs-brands__viewport {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.bs-brands__viewport::-webkit-scrollbar {
	display: none;
}

/* без автопрокрутки - гортання з притяганням до логотипа */
.bs-brands:not(.bs-brands--auto) .bs-brands__viewport {
	scroll-snap-type: x proximity;
}

.bs-brands:not(.bs-brands--auto) .bs-brands__item {
	scroll-snap-align: start;
}

/* усе вміщається - по центру, без кнопок */
.bs-brands--fit .bs-brands__viewport {
	justify-content: center;
}

.bs-brands__list {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--bs-gap);
	margin: 0;
	padding: 0 var(--bs-gap) 0 0;
	list-style: none;
}

.bs-brands--fit .bs-brands__list {
	padding-right: 0;
}

.bs-brands__item {
	flex: none;
	display: flex;
	align-items: center;
	min-height: var(--bs-h, 60px);
}

.bs-brands__link {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: .5rem;
	-webkit-user-drag: none;
}

.bs-brands__link:focus-visible {
	outline: 2px solid var(--bs-accent);
	outline-offset: 4px;
}

.bs-brands__logo {
	display: block;
	width: var(--w, auto);
	height: var(--h, var(--bs-h, 60px));
	max-width: none;
	object-fit: contain;
	user-select: none;
	transition: filter .25s ease, opacity .25s ease;
}

.bs-brands--gray .bs-brands__logo {
	filter: grayscale(1);
	opacity: .65;
}

.bs-brands--gray .bs-brands__link:hover .bs-brands__logo,
.bs-brands--gray .bs-brands__link:focus-visible .bs-brands__logo {
	filter: none;
	opacity: 1;
}

/* Темна тема. Вигляд бренду (вкладка «Логотипы»): as_is - як є, invert - чорний моно стає білим, plate - світла
   підкладка; без своєї настройки - загальна «светлая подложка» модуля (bs-brands--plate). Окремий файл для темної
   теми (has-dark) підміняє основний. */
.bs-brands__logo--dark {
	display: none;
}

.dark-theme .bs-brands__item--has-dark .bs-brands__logo:not(.bs-brands__logo--dark),
[data-bs-theme="dark"] .bs-brands__item--has-dark .bs-brands__logo:not(.bs-brands__logo--dark) {
	display: none;
}

.dark-theme .bs-brands__item--has-dark .bs-brands__logo--dark,
[data-bs-theme="dark"] .bs-brands__item--has-dark .bs-brands__logo--dark {
	display: block;
}

.dark-theme .bs-brands__item--dark-plate .bs-brands__link,
[data-bs-theme="dark"] .bs-brands__item--dark-plate .bs-brands__link,
.dark-theme .bs-brands--plate .bs-brands__item:not([class*="--dark-"]) .bs-brands__link,
[data-bs-theme="dark"] .bs-brands--plate .bs-brands__item:not([class*="--dark-"]) .bs-brands__link {
	padding: .5rem .75rem;
	background: #fff;
}

.dark-theme .bs-brands__item--dark-invert .bs-brands__logo,
[data-bs-theme="dark"] .bs-brands__item--dark-invert .bs-brands__logo,
.dark-theme .bs-brands--gray .bs-brands__item--dark-invert .bs-brands__link:hover .bs-brands__logo,
[data-bs-theme="dark"] .bs-brands--gray .bs-brands__item--dark-invert .bs-brands__link:hover .bs-brands__logo {
	filter: brightness(0) invert(1);
}

/* світла тема: темна підкладка для світлих/золотих логотипів (у темній темі не потрібна) */
.bs-brands__item--light-dark_plate .bs-brands__link {
	padding: .5rem .75rem;
	background: var(--bs-dark-plate, #1c241d);
}

.dark-theme .bs-brands__item--light-dark_plate .bs-brands__link,
[data-bs-theme="dark"] .bs-brands__item--light-dark_plate .bs-brands__link {
	padding: 0;
	background: none;
}

.dark-theme .bs-brands__item--light-dark_plate.bs-brands__item--dark-plate .bs-brands__link,
[data-bs-theme="dark"] .bs-brands__item--light-dark_plate.bs-brands__item--dark-plate .bs-brands__link {
	padding: .5rem .75rem;
	background: #fff;
}

.bs-brands__arrow {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 .5rem;
	padding: 0;
	color: var(--bs-text);
	background: var(--bs-bg);
	border: 1px solid var(--bs-border);
	border-radius: 50%;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}

.bs-brands__arrow:first-child {
	margin-left: 0;
}

.bs-brands__arrow:last-child {
	margin-right: 0;
}

.bs-brands__arrow:hover,
.bs-brands__arrow:focus-visible {
	color: var(--bs-accent);
	border-color: var(--bs-accent);
	outline: none;
}

.bs-brands__arrow[hidden] {
	display: none;
}

.bs-brands__arrow:disabled {
	opacity: .35;
	cursor: default;
}

@media (max-width: 767.98px) {
	.bs-brands {
		--bs-gap: 1.75rem;
	}

	.bs-brands__body {
		padding: .75rem;
	}

	.bs-brands__item {
		min-height: calc(var(--bs-h, 60px) * .7);
	}

	.bs-brands__logo {
		width: calc(var(--w, 100px) * .7);
		height: calc(var(--h, var(--bs-h, 60px)) * .7);
	}

	/* на телефоні гортають пальцем - кнопки не потрібні */
	.bs-brands__arrow {
		display: none;
	}
}