.karma-builder-element {

	&[ data-name="karma_image_box" ] {
		cursor: auto;

		&.karma-active-element {

			.karma-image-text-box {
				outline: 1px solid $builder-accent-color;
			}
		}

		//use important for conflict with fit-content
		div.karma-element-content {
			width: 100% !important;
		}

		.karma-image-text-box {
			box-sizing: border-box;
			display: flex;
			padding: 6vh;
			position: relative;
			width: 100%;

			&.karma-image-text-box-background-size-real {
				.karma-image-box-background,
				.karma-element-blur-effect{
					background-size: auto;
				}
			}

			&.karma-image-text-box-background-size-fill {
				.karma-image-box-background,
				.karma-element-blur-effect{
					background-size: cover;
				}
			}

			&.karma-image-text-box-background-size-contain {
				.karma-image-box-background,
				.karma-element-blur-effect {
					background-size: auto;
				}
			}

			&.karma-image-text-box-background-size-cover {
				.karma-image-box-background,
				.karma-element-blur-effect {
					background-size: cover;
				}
			}

			&.karma-image-text-box-position-top-left {
				.karma-image-box-background,
				.karma-element-blur-effect {
					background-position: top left;
				}
			}

			&.karma-image-text-box-position-top-center {
				.karma-image-box-background,
				.karma-element-blur-effect {
					background-position: top center;
				}
			}

			&.karma-image-text-box-position-top-right {
				.karma-image-box-background,
				.karma-element-blur-effect {
					background-position: top right;
				}
			}

			&.karma-image-text-box-position-center-left {
				.karma-image-box-background,
				.karma-element-blur-effect {
					background-position: center left;
				}
			}

			&.karma-image-text-box-position-center-center {
				.karma-image-box-background,
				.karma-element-blur-effect {
					background-position: center center;
				}
			}

			&.karma-image-text-box-position-center-right {
				.karma-image-box-background,
				.karma-element-blur-effect {
					background-position: center right;
				}
			}

			&.karma-image-text-box-position-bottom-left {
				.karma-image-box-background,
				.karma-element-blur-effect {
					background-position: bottom left;
				}
			}

			&.karma-image-text-box-position-bottom-center {
				.karma-image-box-background,
				.karma-element-blur-effect {
					background-position: bottom center;
				}
			}

			&.karma-image-text-box-position-bottom-right {
				.karma-image-box-background,
				.karma-element-blur-effect {
					background-position: bottom right;
				}
			}

			&.karma-image-text-box-content-position-top-left {
				@include justify-align( flex-start, flex-start );

				.karma-image-text-box-text-container {
					text-align: left;

					.karma-image-text-box-link-content {
						justify-content: flex-start;
					}
				}
			}

			&.karma-image-text-box-content-position-top-center {
				@include justify-align( flex-start, center );

				.karma-image-text-box-text-container {
					text-align: center;

					.karma-image-text-box-link-content {
						justify-content: center;
					}
				}
			}

			&.karma-image-text-box-content-position-top-right {
				@include justify-align( flex-start, flex-end );

				.karma-image-text-box-text-container {
					text-align: right;

					.karma-image-text-box-link-content {
						justify-content: flex-end;
					}
				}
			}

			&.karma-image-text-box-content-position-center-left {
				@include justify-align( center, flex-start );

				.karma-image-text-box-text-container {
					text-align: left;

					.karma-image-text-box-link-content {
						justify-content: flex-start;
					}
				}
			}

			&.karma-image-text-box-content-position-center-center {
				@include justify-align( center, center );

				.karma-image-text-box-text-container {
					text-align: center;

					.karma-image-text-box-link-content {
						justify-content: center;
					}
				}
			}

			&.karma-image-text-box-content-position-center-right {
				@include justify-align( center, flex-end );

				.karma-image-text-box-text-container {
					text-align: right;

					.karma-image-text-box-link-content {
						justify-content: flex-end;
					}
				}
			}

			&.karma-image-text-box-content-position-bottom-left {
				@include justify-align( flex-end, flex-start );

				.karma-image-text-box-text-container {
					text-align: left;

					.karma-image-text-box-link-content {
						justify-content: flex-start;
					}
				}
			}

			&.karma-image-text-box-content-position-bottom-center {
				@include justify-align( flex-end, center );

				.karma-image-text-box-text-container {
					text-align: center;

					.karma-image-text-box-link-content {
						justify-content: center;
					}
				}
			}

			&.karma-image-text-box-content-position-bottom-right {
				@include justify-align( flex-end, flex-end );

				.karma-image-text-box-text-container {
					text-align: right;

					.karma-image-text-box-link-content {
						justify-content: flex-end;
					}
				}
			}

			.karma-image-text-box-overlay {
				@include box( 100%, 100% );
				left: 0;
				position: absolute;
				top: 0;
			}

			.karma-image-text-box-text-container {
				max-width: 85% ;
				width: fit-content;
				> div {
					position: relative;
					.karma-image-text-box-title-tag,
					.karma-image-text-box-link-tag {
						display: inline-block;
						margin: 0;
						min-width: 30px;
						text-decoration: none;
					}

					.karma-image-text-box-description-tag.karma-image-box-description-opacity{
						display: none;
					}
					.karma-image-text-box-title-tag.karma-image-box-title-opacity{
						display: none;
					}

					.karma-image-text-box-link-tag{
						align-items: center;
						display: flex;
						justify-content: center;
					}
					&.karma-image-text-box-link-content{
						margin-top: 8px;
						.karma-button-fill,
						.karma-button-outline{
							margin-top: 12px;
						}
					}
					&.karma-image-text-box-description{
						margin-top: 10px;
					}
				}
			}

			.karma-image-text-box-link:not( .karma-show-child-gizmo ) {

				.karma-image-text-box-link-shape {
					height: 28px;
					transition-duration: .3s;
					width: 12px;
					backface-visibility: hidden;
				}

				&:hover {

					.karma-image-text-box-link-shape {
						height: 28px;
						transform: translate(3px) rotate(-90deg);
						transition-duration: .2s;
						width: 12px;
						backface-visibility: hidden;
					}
				}
			}
			.karma-image-text-box-link-content{
				display: flex;
				margin-top: 22px;
			}
			.karma-image-text-box-link {
				display: flex;
				white-space: nowrap;
				width: fit-content;
				
				&.karma-button-fill {

					@include flexbox(center, center, center);
					border-style: solid;
					border-width: 2px;
					height: 42px;
					justify-content: center !important;
					padding: 9px 22px;
					//important for image position
					transition: 0.2s;

					&:hover {
						box-shadow: 0 20px 38px rgba(0, 0, 0, 0.16);
						transition: 0.2s;
					}

					.karma-image-text-box-link-shape{
						//conflict with inline js code
						display: none !important;
					}
					&.karma-show-child-gizmo{
						&:hover{
							opacity: 1;
							transition:0s;
						}
					}

					&.karma-show-child-gizmo{
						&.karma-deactive-on-desktop {
							&:hover {
								opacity: .2;
								transition: 0s;
							}
						}
						&.karma-deactive-on-mobile {
							&:hover {
								opacity: .2;
								transition: 0s;
							}
						}
						&.karma-deactive-on-tablet {
							&:hover {
								opacity: .2;
								transition: 0s;
							}
						}
					}

				}

				&.karma-button-outline{
					@include flexbox( center, center, center );
					background-color: transparent;
					border-style: solid;
					border-width: 2px;
					height: 42px;
					justify-content: center !important;
					padding: 9px 22px;
					//important for image position
					transition:0.2s;

					&:hover{
						opacity: 0.7;
						transition:0.2s;
					}
					.karma-image-text-box-link {
						justify-content: center;
					}

					div.karma-image-text-box-link-shape{
						//conflict with inline js code
						display: none !important;
					}
					&.karma-show-child-gizmo{
						&:hover{
							opacity: 1;
							transition:0s;
						}
						&.karma-deactive-on-desktop {
							&:hover {
								opacity: .2;
								transition: 0s;
							}
						}
						&.karma-deactive-on-mobile {
							&:hover {
								opacity: .2;
								transition: 0s;
							}
						}
						&.karma-deactive-on-tablet {
							&:hover {
								opacity: .2;
								transition: 0s;
							}
						}
					}


				}


				&.karma-button-fill{
					.karma-button-link{
						color: #fff;
						font-family : $builder-medium-font ;
						font-size: 15px;
						line-height: 25px;

						span{
							display: inline-block;
							&:focus{
								outline: none;
							}
						}
					}
				}

				&.karma-button-outline{
					.karma-button-link{
						color: $builder-accent-color;
						font-family : $builder-medium-font ;
						font-size: 15px;
						line-height: 25px;
						span{
							display: inline-block;
							&:focus{
								outline: none;
							}
						}
					}
				}

				.karma-image-text-box-link-shape {
					transform: rotate(-90deg);

					svg {
						height: 4px;

						* {

							stroke-width: 2px;
						}

						stroke: #fff;
					}
				}
			}

		}

		.karma-image-position-content.karma-drop-down-box.open-drop-down-gizmo {
			@include box( 110px, 110px );
			left: 14px;
			padding: 17px;
		}

		.karma-builder-gizmo-icon.karma-image-setting-layout {

			svg {
				@include box( 14px );
			}
		}

		.karma-deactive-on-desktop{
			opacity:.2;
		}

		.karma-deactive-on-mobile{
			opacity:.2;
		}

		.karma-deactive-on-tablet{
			opacity:.2;
		}

		div.karma-image-text-box-text-container{
			div.karma-image-text-box-link-content{

				.desktop-display-none{
					display: none;
				}
				.mobile-display-none{
					display: none;
				}
				.tablet-display-none{
					display: none;
				}

			}
		}

		.karma-box-element-hover-shadow{

			.karma-image-box-background-container,
			.karma-element-blur-effect{
				@include box( 100% );
				background-repeat: no-repeat;
				left: 0;
				position: absolute;
				top: 0;
			}

			.karma-image-box-background-container{
				background-color: transparent;
				overflow: hidden;
				transform: scale(1) translateZ(0);
				transition: transform .28s ease;
				backface-visibility: hidden;

			}

			.karma-image-box-background{
				background-color: transparent;
				background-repeat: no-repeat;
				height: 100%;
				transform: scale(1.13) translateZ(0);
				transition: transform .28s ease;
				backface-visibility: hidden;

			}

			.karma-element-blur-effect{
				filter: blur(35px);
				opacity: 0;
				transform: translateY(38px);
				transition: opacity .28s ease;
				z-index: -1;
			}

		}

		&:not(.karma-active-element){
			.karma-box-element-hover-shadow{
				&:hover {
					transition-delay: 0s !important;
					z-index: 3;

					.karma-image-box-background-container,
					.karma-element-blur-effect {
						@include box(100%);
						left: 0;
						position: absolute;
						top: 0;
					}
					.karma-image-box-background-container {
						backface-visibility: hidden;
						transform: scale(1.08) translateZ(0);
					}
					.karma-image-box-background {
						backface-visibility: hidden;
						transform: scale(1) translateZ(0);
					}
					.karma-element-blur-effect {
						opacity: 0.7;
					}
				}

			}

		}

		.karma-box-element-shadow {

			.karma-image-box-background-container,
			.karma-element-shadow-effect {
				@include box( 100% );
				left: 0;
				position: absolute;
				top: 0;
			}

			.karma-image-box-background-container{
				backface-visibility: hidden;
				overflow: hidden;
			}

			.karma-image-box-background{
				background-repeat: no-repeat;
				height: 100%;
			}

			.karma-element-shadow-effect{
				box-shadow: 0 11px 36px 0 rgba(0, 0, 0, 0.25);
			}

		}

		.karma-box-element-no-animation{
			.karma-image-box-background-container{
				@include box( 100% );
				left: 0;
				position: absolute;
				top: 0;
			}
			.karma-image-box-background-container{
				background-color: transparent;
				backface-visibility: hidden;
				overflow: hidden;
			}
			.karma-image-box-background{
				background-repeat: no-repeat;
				height: 100%;
			}
		}

	}

}

//when hide gizmo active want show element
.karma-builder-environment{
		//important: want in all element that have this class
		.desktop-display-none {
			display: inherit !important;
		}
		.mobile-display-none {
				display: inherit !important;
			}
		.tablet-display-none {
				display: inherit !important;
			}

}

.karma-builder-environment {

	.karma-image-text-box-title-tag,
	.karma-image-text-box-description-tag,
	.karma-image-text-box-link-tag{
		cursor: text;
	}
	#karma-builder-layout {
		.karma-image-box-description-opacity{
			display: block;
			opacity: .5;
		}
		.karma-image-box-title-opacity{
			display: block;
			opacity: .5;
		}
	}

}