/* Кастомные стили для slider-gallery */
:root {
	--sg-arrow-height: 60px;
	--sg-arrow-width: 60px;
	--sg-arrow-font-size: calc(var(--sg-arrow-height) / 2 - var(--sg-arrow-height) / 10);
	--sg-arrows-gap: 6px;
	--sg-arrows-width: calc(var(--sg-arrow-width) * 2 + var(--sg-arrows-gap));
}

@media all and (max-width:767px) {
	--sg-arrow-height: 46px;
	--sg-arrow-width: 46px;
}

/* region arrow */
.sg-arrow {
	border-radius: 50%;
	pointer-events:auto;
	font-size: var(--sg-arrow-font-size);
	box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.14);
	display:flex;
	align-items:center;
	justify-content:center;
	height: var(--sg-arrow-height);
	line-height: var(--sg-arrow-height);
	width: var(--sg-arrow-height);
}
.sg-arrow:not(:disabled) {
	cursor: pointer;
}
.sg-arrow:disabled {
	display: none;
}
.sg-arrow:not(:hover) {
	background: rgba(210, 210, 215, 0.75);
	color: rgba(0, 0, 0, 0.75);
}
.sg-arrow:hover {
	color: var(--theme-orange);
	background: var(--text-color);
}
.sg-arrow svg {
	height: calc(var(--sg-arrow-height) * 0.4);
	fill: currentColor;
}
.sg-arrow_prev svg {
	right: calc(var(--sg-arrow-width) * 0.03);
}
.sg-arrow_next svg {
	left: calc(var(--sg-arrow-width) * 0.03);
}
/* endregion */

/* region pagination */
.sg-pagination {
	margin-top:10px;
	text-align:center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap:6px;
	overflow: hidden;
}
.sg-pagination-btn {
	cursor: pointer;
	width:8px;
	height:8px;
	border-radius:50%;
	background: var(--bg2-darken5);
	flex-shrink: 0;
}
.sg-pagination-btn.active {
	background: var(--bg2-darken10);
	width: 12px;
	height: 12px;
}
/* endregion */