.karma-builder-element {

	&[ data-name="karma_video_box" ] {
		cursor: auto;
		.karma-deactive-on-desktop:nth-child(1){
			opacity:.2;
		}

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

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

			}
		}


		&.karma-active-element {
			.karma-video-box {
				outline: 1px solid $builder-accent-color;
			}
		}

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

		.karma-video-box {
			background: transparent !important;
			box-sizing: border-box;
			display: flex;
			padding: 6vh;
			position: relative;
			width: 100%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

				.karma-video-box-link-content {
					@include box( 12px, 28px );
					transition-duration: .3s;
					backface-visibility: hidden;

				}

				&:hover {
					.karma-video-box-link-shape {
						transform: translate(3px) rotate(-90deg);
						backface-visibility: hidden;
					}
				}
			}

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

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

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

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

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

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

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

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

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

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

			}

			.karma-video-box-text-container {
				width: fit-content;
				max-width: 85% ;
				> div {
					position: relative;

					.karma-video-box-title-tag,
					.karma-video-box-link-tag {
						display: inline-block;
						margin: 0;
						min-width: 30px;
						text-decoration: none;
					}
					.karma-video-box-description-tag.karma-video-box-description-opacity{
						display: none;
					}
					
					.karma-video-box-title-tag.karma-video-box-title-opacity{
						display: none;
					}

					&.karma-video-box-description{
						margin-top: 10px;
					}
				}
			}

			.karma-video-box-link-content{
				display: flex;
				margin-top: 10px;
				.karma-button-fill,
				.karma-button-outline{
					margin-top: 8px;
				}
			}

			.karma-video-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;
					padding: 9px 22px;
					transition: 0.2s;
					//important for image position
					justify-content: center !important;

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

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

					&:hover{
						opacity: 0.7;
						transition:0.2s;
					}
					.karma-image-text-box-link {
						justify-content: center;
					}
					.karma-video-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-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-video-box-link-shape {
					@include box( 12px, 28px );
					transition-duration: .2s;
					transform: rotate(-90deg);
					svg {
						height: 4px;
						* {
							stroke-width: 2px;
						}
					}
				}
			}

		}

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

		.karma-video-box-container-player {
			@include flexbox( center, center, center );
			@include box( 100%, 100% );
			cursor: default;
			display: flex;
			left: 0;
			position: absolute;
			top: 0;
			.karma-video-box-player {
				cursor: pointer;
				transition-duration: .3s;
				z-index: 1;
				svg {
					* {
						transition-duration: .5s;
						fill: #fff;
					}
				}
			}

			.karma-video-box-player:hover {
				backface-visibility: hidden;
				transform: scale(1.2);
				transition-duration: .3s;

				svg {
					path {
						opacity: .5;
						transition-duration: .5s;
					}
					polygon {
						opacity: 1;
					}
				}
			}

		}

		.karma-image-position-content .karma-image-position-box.karma-image-position-center-dot {
			visibility: hidden;
		}

		.karma-builder-gizmo-icon.karma-video-setting-layout {
			svg {
				@include box( 14px, 14px );
			}
		}

		.karma-builder-environment{

			.desktop-display-none{
				display: inherit;
			}
		}

		.karma-box-element-hover-shadow{

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

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

			}

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

			}

			.karma-element-blur-effect{
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				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-video-box-background-container,
					.karma-element-blur-effect {
						@include box(100%);
						left: 0;
						position: absolute;
						top: 0;
					}
					.karma-video-box-background-container {
						backface-visibility: hidden;
						transform: scale(1.08) translateZ(0);
					}
					.karma-video-box-background {
						backface-visibility: hidden;
						transform: scale(1) translateZ(0);
					}
					.karma-element-blur-effect {
						opacity: 0.7;
					}
				}
			}
		}

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

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

			.karma-video-box-background{
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				height: 100%;
			}

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

		}

		.karma-box-element-no-animation{
			.karma-video-box-background-container{
				@include box( 100% );
				left: 0;
				position: absolute;
				top: 0;
			}
			.karma-video-box-background-container{
				background-color: transparent;
				backface-visibility: hidden;
				overflow: hidden;
			}
			.karma-video-box-background{
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				height: 100%;
			}
		}
	}
}
.karma-builder-environment {
	
	.karma-video-box-title-tag,
	.karma-video-box-description-tag,
	.karma-video-box-link-tag {
		cursor: text;
	}

	#karma-builder-layout {
		.karma-video-box-description-opacity{
			display: block;
			opacity: .5;
		}
		.karma-video-box-title-opacity{
			display: block;
			opacity: .5;
		}
	}
	
}