/* ======================================================
   <!-- Advanced Slider (Basic) -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';

/*
 * 1. Initialize the slider style
 * 2. Pagination dots
 * 3. Next/Prev buttons
*/

$anim-duration: 0.6s;



/*
 ---------------------------
 1. Initialize the slider style
 ---------------------------
 */
.uix-advanced-slider__wrapper {
	position: relative;
}


/* Prevent content overflow */
.uix-advanced-slider__wrapper,
.uix-advanced-slider__item {
	//max-height: 100vh;
}

.uix-advanced-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 1;


	.uix-advanced-slider__inner {
		/* Don't set overflow to "hidden" */
		position: relative;
		z-index: 1;
		height: 100%;



		.uix-advanced-slider__item {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			width: 100%;
			opacity: 0;

			/* Javascript will automatically get this value, please do not delete */
			transition: all #{$anim-duration} ease;



			.uix-advanced-slider__txt {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%) !important;
				z-index: 15;
				@include transition-cubic-bezier();
				margin-top: 100px;
				opacity: 0;

				h3 {
					margin-bottom: 0;
				}

			}


			@include securityWidthForElement( '.uix-advanced-slider__txt' ) ;




			img {
				width: 100%;
			}

			&.leave {
				opacity: 0;


				.uix-advanced-slider__txt {
					margin-top: 100px;
					opacity: 0;
				}

			}

			&.is-active {
				/* Allow button clicks */
				z-index: 2;
				opacity: 1;


				.uix-advanced-slider__txt {
					margin-top: 0;
					opacity: 1;
					transition-delay: 0.6s;
				}


			}


		}

	}


}


/* Tests native CSS3 and HTML5 features are available */
/*---- Effect: Scale ----*/
/* --------------------------- */
.cssanimations {

	.uix-advanced-slider {

		&.uix-advanced-slider--eff-scale {
			.uix-advanced-slider__inner {

				.uix-advanced-slider__item {
					opacity: 0;
					transform: scale(.8);

					/* Default */
					&.prev {
						transform: translateX(200px) scale(.8);
					}

					&.next {
						transform: translateX(-200px) scale(.8);
					}



					/* Leave  */
					&.leave {
						opacity: 0;

						&.prev {
							transform: translateX(-200px) scale(.8);
						}

						&.next {
							transform: translateX(200px) scale(.8);
						}

					}

					/* Active  */
					&.is-active {
						transition-delay: #{$anim-duration};
						opacity: 1;

						&.prev {
							transform: translateX(0) scale(1);
						}

						&.next {
							transform: translateX(0) scale(1);
						}


					}


				}

			}

		}

	}


}

/*---- Effect: Slide ----*/
/* --------------------------- */
.cssanimations {

	.uix-advanced-slider {

		&.uix-advanced-slider--eff-slide {
			.uix-advanced-slider__inner {

                .uix-advanced-slider__item {
                    opacity: 1;
                    z-index: 3;

                    &:not(.leave):not(.is-active) {
                        transition: none;
                        z-index: 1;
                    }

                    &.leave {
                        &.prev {
                            animation: uix-cssAnim--slideLeftLeave 1.2s ease 1 forwards;
                        }

                        &.next {
                            animation: uix-cssAnim--slideRightLeave 1.2s ease 1 forwards;
                        }
                    }

                    &.is-active {
                        transition-delay: 0s;

                        &.prev {
                            animation: uix-cssAnim--slideRight 1.2s ease 1 forwards;
                        }

                        &.next {
                            animation: uix-cssAnim--slideLeft 1.2s ease 1 forwards;
                        }
                    }
                }
                

			}

		}

	}


}


/* --------------------------- */
@keyframes uix-cssAnim--slideRightLeave {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes uix-cssAnim--slideRight {
    0% {
        transform: translateX(100%);
        z-index: 2;
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes uix-cssAnim--slideLeftLeave {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes uix-cssAnim--slideLeft {
    0% {
        transform: translateX(-100%);
        z-index: 2;
    }

    100% {
        transform: translateX(0);
    }
}




@media all and (max-width: 768px) {


	.uix-advanced-slider {

		.uix-advanced-slider__inner {

			.uix-advanced-slider__item {

				.uix-advanced-slider__txt {

					h3 {
						font-size: 1rem;

					}

					p {
						font-size: 0.875rem;
					}

					h3,
					p {
						margin-bottom: 0;
						padding-bottom: 0;
						line-height: 1.2;
					}

					[class*='uix-core-grid__col-'] {
						width: 100%;
					}

					.uix-btn {
						margin-top: .3rem;
						padding: .3rem 1rem;
						font-size: 0.75rem;
					}

				}

			}

		}


	}

}
/*
 ---------------------------
 2. Pagination dots
 ---------------------------
 */
.uix-advanced-slider__pagination {

	position: relative;
	transform: translateY(-40px);
	z-index: 2;

	ul {
		list-style: none;
		left: 0;
		bottom: 0;
		font-size: 0;/*Fighting the Space Between Inline Block Elements*/
		display: block;
		width: 100%;
		text-align: center; /*require*/
		position: relative;
		transform: translateY(.5rem);

		li {
			font-size: 1rem;/*Fighting the Space Between Inline Block Elements*/
			display: inline-block; /*require*/
			margin: 0 .2rem;

			a {
				width: 12px;
				height: 12px;
				display: block;
				box-shadow: 0px 3px 22px 0px rgba(0,0,0,0.45);
				background: rgba(255, 255, 255, .6);
				cursor: pointer;
				text-indent: -9999px;
				border-radius: 20px;

				&:hover,
				&.is-active {
					background: rgba(255, 255, 255, 1);
					width: 25px;
				}
			}

		}


	}



}


//******** Style 2 **********
//
//.uix-advanced-slider__pagination {
//	margin: 0;
//	padding: 0;
//	list-style: none;
//	position: absolute;
//	right: 40px;
//	top: 50%;
//	width: 20px;
//	z-index: 4;
//
//	li {
//		margin: 0;
//		padding: 0;
//		list-style: none;
//		margin-right: 10px;
//		margin-bottom: 15px;
//
//		a {
//			width: 8px;
//			height: 8px;
//			display: block;
//			background: rgba(255, 255, 255, 0.3);
//			cursor: pointer;
//			text-indent: -9999px;
//			border-radius: 20px;
//			box-shadow: 0px 6px 23px -2px rgba(0, 0, 0, 0.36);
//			position: relative;
//
//
//
//			&:hover,
//			&.is-active {
//				background: rgba(255, 255, 255, 1);
//
//
//				&::after {
//					content: '';
//					display: block;
//					width: 18px;
//					height: 18px;
//					border: 1px solid #fff;
//					border-radius: 100%;
//					position: absolute;
//					top: -5px;
//					left: -5px;
//				}
//			}
//		}
//	}
//}



/*
 ---------------------------
 3. Next/Prev buttons
 ---------------------------
 */
.uix-advanced-slider__arrows {
	position: relative;
	transform: translateY(-65px);
	z-index: 3;

	a {
		box-shadow: 0px 10px 54px 0px rgba(19, 32, 62, 0.21);
		border-radius: 100%;
		width: 50px;
		height: 50px;
		position: absolute;
		transition: .3s ease-in-out;
		line-height: 50px;
		text-align: center;
		background: #fff;

	}

	.uix-advanced-slider__arrows--prev {
		left: 15px;

		&.is-disabled {
			visibility: hidden;

		}

	}
	.uix-advanced-slider__arrows--next {
		right: 15px;

		&.is-disabled {
			visibility: hidden;
		}



	}

}