/* ======================================================
    <!-- Swiper -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';

/*
 * 1. General
 * 2. Custom pagination & prev/next buttons
 * 3. Swiper custom slides transform effect
 * 4. Entered active 
 * 5. Display half on both sides
 * 6. Custom Progress Bar 
 * 7. Gallery with center thumbs automatically
 * 8. Gallery with manual triggers
*/

/*
 ---------------------------
 1. General
 ---------------------------
 */
.swiper-container {
    width: 100%;
    height: 300px;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #ECECED;
	/* Center slide text vertically */
	display: flex;
	justify-content: center;
	align-items: center;
}


/*
 ---------------------------
 2. Custom pagination & prev/next buttons
 ---------------------------
 */
/* Custom pagination */
.swiper-pagination-bullet {
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	font-size: 12px;
	color: #000;
	opacity: 1;
	background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
	color: #fff;
	background: red;
}


/* Custom prev/next buttons */
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev,
.swiper-button-prev, 
.swiper-container-rtl .swiper-button-next{

	&::after {
		display: none;
	}

	svg {
		width: 44px;

		path {
			fill: red;
		}
	}

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


/*
 ---------------------------
 3. Swiper custom slides transform effect
 ---------------------------
 */
#app-slider3,
#app-slider4 {
	
	.swiper-slide {
		overflow: hidden; /* required */
		
		> .slide-inner {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-size: cover;
			background-position: center;
			z-index: 2;
		}
		
		> span {
			display: inline-block;
			position: absolute;
			z-index: 3;
			left: 50px;
			top: 50px;
			background: #333;
			color: #fff;
			font-size: 20px;
			padding: .5rem 1rem;
		}
		
	}
	

}


/*
 ---------------------------
 3_2. Swiper video
 ---------------------------
 */
 #app-slider3_2 {
     
	height: auto;
	
    video,
	img {
		width: 100%;
	}
 }

/*
 ---------------------------
 4. Entered active
 ---------------------------
 */
#app-slider5 {
	
	.swiper-slide {
		opacity: .7;
		transform: scale(.8);
		transition: .1s ease-in-out;
		
		&.swiper-slide-active {
			transform: scale(1);
			opacity: 1;
		}

	}
}



/*
 ---------------------------
 5. Display half on both sides
 ---------------------------
 */
#app-slider6 {
	.swiper-slide {
		width: 60%;
		padding:0 2rem !important;
	}
	
}

/*
 ---------------------------
 6. Custom Progress Bar
 ---------------------------
 */
#app-slider7 {
	
	position: relative;

	#app-slider7__progress {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		background-color: blue;
		height: 3px;
		width: 0;
		z-index: 100;
	}
	#app-slider7__progress2 {
		position: absolute;
		left: 0;
		right: 0;
		top: 3px;
		width: 0;
		background-color: yellow;
		height: 3px;
		z-index: 100;
	}
	
}


/*
 ---------------------------
 7. Gallery with center thumbs automatically
 ---------------------------
 */

#app-slider8 {
	height: auto;
	
	img {
		width: 100%;
	}
}

#app-slider8-thumbs {
	
	height: auto;
	margin-top: 15px;
	
	
	.swiper-slide {
		width: auto;
		opacity: 0.3;
		filter: grayscale(100%);
		
		&.swiper-slide-active {
			opacity: 1;
			filter: initial;
		}
		
		img {
			cursor: pointer;
			width: auto;
			height: 100px;
		}	
		
	}
}



/*
 ---------------------------
 8. Gallery with manual triggers
 ---------------------------
 */

#app-slider9 {
	height: auto;
	
	img {
		width: 100%;
	}
}


#app-slider9-triggers {
	
	height: auto;
	margin-top: 15px;
	
	
	> div {
		display: inline-block;
		width: auto;
		opacity: 0.3;
		filter: grayscale(100%);
		
		&.is-active {
			opacity: 1;
			filter: initial;
		}
		
		img {
			cursor: pointer;
			width: auto;
			height: 60px;
		}	
		
	}
}