// Editor colors
$editor-darkest:#495157;
$editor-darker: #556068;
$editor-dark:   #6d7882;

$editor-light:    #a4afb7;
$editor-lighter:  #c2cbd2;
$editor-lightest: #d5dadf;

$editor-accent:           #9b0a46;
$editor-background:       #e6e9ec;
$editor-background-light: #f1f3f5;

$editor-orange: #fcb92c;

$editor-danger:  #f00;
$editor-warning: #b01b1b;
$editor-success: #39b54a;
$editor-info:    #71d7f7;

// Panel style
$panel-top-shadow:   -2px -5px 8px rgba(0, 0, 0, 0.1);
$panel-bottom-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

$ui_success_color: #3ba956;

.jet-popup-edit {
	position: relative;

	&__link {
		position: absolute;
		opacity: 0;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: opacity 200ms linear;
		border: 4px solid $editor-info;
		background: rgba( red( $editor-info ), green( $editor-info ), blue( $editor-info ), .2 );
		color: #fff;
		z-index: 99999;
		cursor: pointer;
		font-weight: 400;
		font-size: 16px;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

		&-content {
			display: flex;
			justify-content: center;
			align-items: center;
			background-image: linear-gradient(to bottom, darken($editor-info, 10%), $editor-info);
			padding: 4px 15px 6px 10px;
		}

		.dashicons {
			margin-right: 4px;
		}
	}

	&:hover .jet-popup-edit__link {
		color: #fff;
		opacity: 1;
		text-decoration: none;
	}
}

.single-jet-popup {
	background-image: url( '../image/transparent.jpg' );
	background-repeat: repeat;
	height: 100vh;
	overflow: hidden;

	#elementor-add-new-section {
		background-color: white;
		margin: 25px auto 0 auto;

		.elementor-add-section-inner {
			margin-bottom: 10px;
			padding: 10px 0;
		}
	}
}

.jet-popup-edit-area {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;

	.jet-popup {
		display: flex;
		justify-content: center;
		align-items: stretch;
		width: 100%;
		height: 100vh;
		perspective: 1000px;

		.jet-popup__inner {
			width: 100%;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.jet-popup__close-button {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0px;
			right: 0px;
			cursor: pointer;
			z-index: 2;
			transition: all 0.2s ease;

			width: 30px;
			height: 30px;
			font-size: 20px;
			color: white;
			background-color: black;

			i {
				line-height: 1;
			}

			svg {
				width: var( --jp-close-button-icon-size, 16px );
				height: auto;
				fill: var( --jp-close-button-icon-color, #fff );

				path {
					fill: currentColor;
				}
			}

			&.hidden {
				visibility: hidden;
			}
		}

		.jet-popup__overlay {
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;

			background-color: rgba( 0, 0, 0, 0.5);

			&.hidden {
				visibility: hidden;
			}
		}

		.jet-popup__container {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: stretch;
			width: 800px;
			max-height: 98%;
			height: auto;
			z-index: 2;
			transform-style: preserve-3d;
		}

		.jet-popup__container-inner {
			width: 100%;
			overflow-y: auto;
			position: relative;
			padding: 20px;
			background-color: white;
			z-index: 1;
			display: flex;
			flex-flow: column nowrap;
			justify-content: flex-start;
			align-items: stretch;

			> .elementor {
				position: relative;
				z-index: 2;
			}
		}

		.jet-popup__container-overlay {
			position: absolute;
			width: 100%;
			height: 100%;
			display: block;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.jet-popup__container-content {
			position: relative;
			z-index: 2;
		}
	}
}