
.breakdance-swiper-wrapper {
	--swiper-navigation-size: 20px;
	--swiper-pagination-color: #2563eb;
	--swiper-theme-color: #2563eb;
	--swiper-padding-h: 42px;
	position: relative;
	padding: 0 var(--swiper-padding-h);
	width: 100%;
}

.swiper {
	overflow: hidden;
	width: 100%;
}

.swiper-button-prev > svg, .swiper-button-next > svg {
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
	width: 100%;
}

.swiper-button-disabled {
	opacity: .35;
	cursor: auto;
	pointer-events: none;
}

.swiper-button-prev, .swiper-button-next {
	position: absolute;
	top: 50%;
	width: var(--swiper-navigation-size);
	height: var(--swiper-navigation-size);
	z-index: 10;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.swiper-button-prev {
	left: 12px;
}

.swiper-button-next {
	right: 12px;
}

/* Fixes a bug with Swiper adding bullets inside pagination when re-updating for some reason */
.swiper-button-prev .swiper-pagination-bullet {
	display: none;
}

.swiper-pagination {
	margin-top: 8px;
	position: initial;
}

.swiper-pagination, .swiper-pagination-bullet {
	color: #2563eb;
}

.swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
	transition: opacity .2s ease-in;
	opacity: .4;
}

.swiper-pagination-bullet {
	background-color: #2563eb;
	margin: 0 4px !important;
	border-radius: 100%;
	bottom: initial;
}

.breakdance-swiper-wrapper .swiper-pagination-progressbar {
	background: rgba(0, 0, 0, .25);
	width: calc(100% - ( var(--swiper-padding-h) * 2 ));
	left: var(--swiper-padding-h);
}
