/* ==================================================
SLIDER COMPONENT
Mazury Hip Hop Festival Premium
================================================== */


/* ==========================================
WRAPPER
========================================== */

.slider {

	position:relative;

}


/* ==========================================
TRACK
========================================== */

.slider-track {

	display:flex;

	overflow-x:auto;

	overflow-y:hidden;

	scroll-behavior:smooth;

	scrollbar-width:none;

	-ms-overflow-style:none;

	/*
	|--------------------------------------------------------------------------
	| MOBILE TOUCH SCROLL
	|--------------------------------------------------------------------------
	*/

	touch-action: pan-x pan-y;

}


/* ==========================================
HIDE SCROLLBAR
========================================== */

.slider-track::-webkit-scrollbar {

	display:none;

}


/* ==========================================
DRAGGING
========================================== */

.slider-track.is-dragging {

	cursor:grabbing;

	scroll-behavior:auto;

}


/* ==========================================
ARROWS
========================================== */

.slider-arrow {

	position:absolute;

	top:50%;

	transform:translateY(-50%);

	width:46px;

	height:46px;

	display:flex;

	align-items:center;

	justify-content:center;

	border:1px solid rgba(255,255,255,.18);

	border-radius:50%;

	background:rgba(10,15,28,.70);

	color:#fff;

	cursor:pointer;

	z-index:20;

	transition:
		background .30s ease,
		border-color .30s ease,
		transform .30s ease;

}


.slider-arrow:hover {

	background:rgba(255,255,255,.12);

	border-color:rgba(255,255,255,.30);

}


.slider-arrow--prev {

	left:-15px;

}


.slider-arrow--next {

	right:-15px;

}


.slider-arrow.is-hidden {

	display:none !important;

}


/* ==========================================
PAGINATION
========================================== */

.slider-pagination {

	display:none;

	justify-content:center;

	align-items:center;

	gap:10px;

	margin-top:28px;

}


.slider-pagination:empty {

	display:none !important;

}


.slider-pagination button {

	width:10px;

	height:10px;

	padding:0;

	border:0;

	border-radius:50%;

	background:rgba(255,255,255,.25);

	cursor:pointer;

	transition:all .30s ease;

}


.slider-pagination button.is-active {

	width:34px;

	border-radius:999px;

	background:linear-gradient(
		90deg,
		#ff0055,
		#ff8a00
	);

}


/* ==========================================
MOBILE
========================================== */

@media (max-width:768px) {


	.slider-track {

		/*
		|--------------------------------------------------------------------------
		| Native horizontal touch scrolling
		|--------------------------------------------------------------------------
		*/

		touch-action: pan-x pan-y;

		-webkit-overflow-scrolling:touch;

	}


	.slider-pagination {

		display:flex;

	}

}