/* Начало: общая навигация горизонтальных лент */

@property --dobro-rail-left-alpha {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}

@property --dobro-rail-right-alpha {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}

.dobro-rail__navigation:not([hidden]) {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 29px;
}

.dobro-rail__arrow,
.dobro-rail__arrow:focus,
.dobro-rail__arrow:hover:not(:disabled) {
	display: inline-flex;
	flex: 0 0 112.78px;
	align-items: center;
	justify-content: center;
	width: 112.78px;
	height: 29px;
	padding: 0;
	appearance: none;
	background: #ee0800;
	border: 1.93px solid #ee0800;
	border-radius: 25.78px;
	box-shadow: none;
	color: #ffffff;
	outline: none;
	cursor: pointer;
	transform: none;
	transition: background-color var(--dobro-transition), border-color var(--dobro-transition), color var(--dobro-transition), transform var(--dobro-transition);
}

.dobro-rail__arrow svg {
	display: block;
	width: 82px;
	height: 24px;
}

.dobro-rail__arrow:active:not(:disabled) {
	background: #ff7b00;
	border-color: #ff7b00;
	color: #ffffff;
	transform: scale(0.97);
}

.dobro-rail__arrow:focus-visible {
	outline: 2px solid #ff7b00;
	outline-offset: 3px;
}

.dobro-rail__arrow:disabled,
.dobro-rail__arrow:disabled:hover,
.dobro-rail__arrow:disabled:focus,
.dobro-rail__arrow:disabled:active {
	background: transparent;
	border-color: #bdbdbd;
	color: #bdbdbd;
	cursor: default;
	transform: none;
}
/* Конец: общая навигация горизонтальных лент */

/* Начало: общая прокрутка и затемнение */
.dobro-rail__viewport {
	--dobro-rail-left-alpha: 1;
	--dobro-rail-right-alpha: 1;
	width: 100%;
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--dobro-rail-side-offset, 0px);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	transition: --dobro-rail-left-alpha 260ms cubic-bezier(.22, 1, .36, 1), --dobro-rail-right-alpha 260ms cubic-bezier(.22, 1, .36, 1);
	mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, var(--dobro-rail-left-alpha)) 0,
		#000000 48px,
		#000000 calc(100% - 48px),
		rgba(0, 0, 0, var(--dobro-rail-right-alpha)) 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, var(--dobro-rail-left-alpha)) 0,
		#000000 48px,
		#000000 calc(100% - 48px),
		rgba(0, 0, 0, var(--dobro-rail-right-alpha)) 100%
	);
}

.dobro-rail__viewport::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.dobro-rail__track > * {
	scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
	.dobro-rail__arrow,
	.dobro-rail__viewport {
		transition: none;
	}
}
/* Конец: общая прокрутка и затемнение */