/* _-_-_- layout/HEADER -_-_-_ */


body.karma-page-manager ,
body.karma-typography-page {
	#karma-dont-show-in-page{
		display : none ;
	}
}

body.karma-main-page{
	#karma-dont-show-in-builder{
		display : none ;
	}
}

#karma-builder-layout{
	a{
		border: none;
	}
	[contenteditable] {
		text-transform: none !important;
	}
}
.ui-helper-hidden-accessible{
	display: none;
}
body.karma-builder{
	overflow-y: hidden;
}
.karma-builder-toolbar {
	@extend .center-both-flex;
	@include box( 100% , 46px );
	@include flexbox( $justify-content:center );
	background-color: #fff;
	box-shadow: 0 2px 12px 0 rgba(57,73,89,0.1);
	position: relative;
	z-index: 1;

	.karma-header-container{
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	a{
		color:$builder-main-color-2;
		text-decoration: none;
	}

	.karma-builder-left {
		@include box( auto, 100% );
		@include flexbox( $align-item:stretch );
		padding-left: 21px;

		ul {
			@include box( auto, 100% );
			@include flexbox( $align-item:stretch );
			list-style: none;
			margin: 0;
			padding: 0;

			>li {
				@include flexbox( $text-align:inherit, $align-item:center, $justify-content:center );
				@extend .karma-builder-title-3;
				color: $builder-main-color-2;
				margin-bottom: inherit;
				margin-left: 39px;
				margin-right: 0;
				margin-top: inherit;
				position: relative;

				&.builder-devtool{
					cursor: pointer;
					div.karma-dropdown-controller{
						cursor: pointer;
						.karma-dropdown-options{
							position: absolute;
						}
					}
					&:after {
						content: "";
						height: 10px;
						width: 250px;
						position: absolute;
						top: 44px;
						left: 0;
						z-index: 9999;
					}

				}

				> div:not( .builder-upgrade-icon ){
					transition: color .1s;
					padding-left: 0;
					padding-right: 0;
					.karma-dropdown-body{
						margin-bottom: 11px;
					}
				}

				&:hover > div {
					color: $builder-main-color-1;
				}

				#karma-upgrade-menu{
					transition: fill .1s ;
					fill: #fff;

				 }

				&:hover  #karma-upgrade-menu{
					fill: $builder-main-color-5;
				}

				.builder-upgrade-icon{
					padding-top: 4px;
				}

				.builder-page-name{
					padding-left: 4px;
				}

				.builder-upgrade-text{
					padding-left: 6px;
				}

				&.builder-brand{
					border-right: 1px solid rgba(255, 255, 255, 0.19);
					margin-left: 0;
					padding-right: 11.5px;
					svg {
						*{
							fill: $builder-accent-color;
						}
						text{
							font-family: $builder-bold-font;
						}
					}
				}
			}
		}
	}

	.karma-builder-right {
		@include flexbox( $align-item:stretch );
		@include box(auto, 100%);
		padding-right: 18px;

		ul {
			@include flexbox( $align-item:center );
			@include box(auto, 100%);
			list-style: none;
			margin: 0;

			li {

				@include flexbox( $text-align:inherit, $align-item:center, $justify-content:center );
				@extend .karma-builder-title-3;
				color: $builder-main-color-5;
				cursor: pointer;
				margin-bottom: 0;
				margin-left: 14px;
				margin-right: inherit;
				margin-top: inherit;
				position: relative;

				&.builder-user-profile{
					@include box( 28px );
					background-color: $builder-accent-color-4;
					border-radius: 100%;
					text-transform: uppercase;


				img{
					@include box( 28px );
					border-radius: 100%;
				}
				div{
					@extend .karma-builder-title-3;
					color: $builder-accent-color;
					font-family: $builder-normal-font;

				}
				}

				&.builder-notification{
					@include flexbox( center, center, center );
					@include box( 28px );
					border: 1px solid #D9EBFE;
					border-radius: 100px;
					display: none;
					svg{
						height: 14px;
						*{
							fill:$builder-accent-color;
						}
					}
				}
			  
				&.builder-publish{
				  	background: linear-gradient(to right, #A0CDFB 50%, #ECF5FE 50%);
					background-position: right bottom;
					background-size: 200% 100%;
					border-radius: 3px;
					color: #419CF8;
					font-size: 14px;
					height: 32px;
					overflow: hidden;
					padding: 0 19px;
					transition: all .5s ease-out;
					transition-duration: .3s;
					width: 82px;
					&:before{
						background-color: rgba( #A0CDFB , .6 );
					  	border-radius: 3px 0 0 3px;
						bottom: 0;
						content: '';
						left: 0;
						position: absolute;
						right: 0;
						top: 0;
						transform: translateX(-100%);
						-webkit-transform: translateX(-100%);


					}


					div{
						transition: opacity 0.3s;
						z-index: 10;

					}


					&.karma-publish-animation{

						&:before{
							transform: translateX(-10%);
							-webkit-transform: translateX(-10%);
							transition: 1.5s ease-in-out;
						}
					}

					&.karma-publish-finish-animation{

						&:before{
							animation: publish-remove-opacity 300ms cubic-bezier( 0.165, 0.84, 0.44, 1 )  forwards  320ms;
							transform: translateX(0);
							-webkit-transform: translateX(0);
							transition: 0.5s ease-in-out;
						}
						&:after{
							animation: publish-animation 2000ms cubic-bezier( 0.165, 0.84, 0.44, 1 )  forwards  500ms ;
							background: url(../../builder/media/svg/publish-tik.svg) no-repeat center center transparent;
							content: '';
							height: 38px;
							left: 32px;
							opacity: 0;
							position: absolute;
							top: -4px;
							width: 22px;
							z-index: 1;

						}

					}

					backface-visibility: hidden;
				}

				.builder-notification-number{
					@include flexbox( $text-align:center, $align-item:center, $justify-content:center );
					@include box( 11px, 11px );
					@include element_direction( $top:-3px, $right:-3px );
					background-color: #fff;
					border-radius: 100%;
					box-sizing: border-box;
					color: #FFF;
					font-family: $builder-bold-font;
					font-size: 8px;
					line-height: 9px;
					padding-top: 2px;
					position: absolute;

					.builder-notification-red-circle{
						@include box( 5px, 5px );
						background-color: #FF5D5C;
						border-radius: 100%;

					}
				}
			}
		}
	}


	backface-visibility: hidden;

}

/* _-_-_- layout/Media Library -_-_-_ */
div.media-modal {
	@include box( 60vw, 60vh );
	margin:auto;
}

/* Drag and drop styles */ 
.karma-overlay-on-dragging{
  @include box( 100% );
  @include element_direction( 0, 0, 0, 0 );
  position: fixed;
  z-index: $level-25;
}

@keyframes publish-animation {
	00% {

		opacity: 0;
		transform: scale(.7);
	}
	5%{
		opacity: .4;
		transform: scale(.7);
	}
	10%{
		opacity: .6;
		transform: scale(.8);
	}
	15%{
		opacity: .8;
		transform: scale(.9);
	}
	20%{
		opacity: 1;
		transform: scale(1);
	}
	40%{
		opacity: 1;
		transform: scale(1);
	}
	60%{
		opacity: 1;
		transform: scale(1);
	}
	70%{
		opacity: 1;
		transform: scale(1);
	}
	80% {
		opacity: 1;
		transform: scale(1);
	}

	83% {
		opacity: .6;
		transform: scale(.8);
	}
	85% {
		opacity: .3;
		transform: scale(.7);
	}
	100% {
		opacity: 0;
		transform: scale(.6);

	}
}
@keyframes publish-remove-opacity {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
	
}

/* some custom css for wp media library */
.screen-reader-text, .screen-reader-text span, .ui-helper-hidden-accessible {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
	clip-path: inset(50%);
}