/* ======================================================
   <!-- SVG Mask Slider -->
/* ====================================================== */
@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
*/


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


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

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


	.uix-svgMask-slider__inner {
		position: relative;
		z-index: 1;
		height: 100%;
		overflow: hidden;



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


			.uix-svgMask-slider__txt {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%) !important;
				z-index: 15;
				overflow: hidden;
				@include transition-cubic-bezier();

				h3 {
					margin-bottom: 0;
				}

			}


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

			.uix-svgMask-slider__txt__content {
				opacity: 0;
			}
			.uix-svgMask-slider__txt__mask {
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 100;
				transform-origin: left;
				margin-left: -100vw;
				background-color: #fff;
			}
			
			@include securityWidthForElement( '.uix-svgMask-slider__txt__mask' ) ;
			
			svg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: auto;
				opacity: 0;
				transition: .3s ease-in-out;
				
				image {
					width: 100%;
					height: auto;
				}
			}


			img {
				width: 100%;
				visibility: hidden; /* save SVG space */
			}

			&.leave {
				z-index: 2;
			}
			

			&.is-active {
				/* Allow button clicks */
				z-index: 3;
			}

			&.is-loaded {
				svg {
					opacity: 1;
				}
				
			}


		}

	}


}



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


	.uix-svgMask-slider {

		.uix-svgMask-slider__inner {

			.uix-svgMask-slider__item {

				.uix-svgMask-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-svgMask-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-svgMask-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-svgMask-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-svgMask-slider__arrows--prev {
		left: 15px;

		&.is-disabled {
			visibility: hidden;

		}

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

		&.is-disabled {
			visibility: hidden;
		}



	}

}