// In Block API v3 the outer .wp-block wrapper (which had position: relative)
// no longer exists. We need position: relative on the block root so the
// absolutely-positioned settings panels have a proper containing block.
.jeo-mapblock.storymap {
	position: relative;
	--jeo-storymap-slides-width: 54%;
	--jeo-storymap-story-width: 26%;
	--jeo-storymap-panel-gap: 15px;

	.storymap-controls {
		// Do NOT add position: relative here — it would become the
		// containing block for the absolutely-positioned children
		// (settings panels, search input, current-slide box), pulling
		// them out of their intended position relative to the block root.

		.story-settings, .slides-settings, .story-settings-hide, .slides-settings-hide  {
			border-radius: 7px;
			box-sizing: border-box;
			box-shadow: 1px 3px 4px 0 rgba(0,0,0,.1);
			contain: paint;
			transform: translateZ(0);

			.heading {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.section-title {
				font-weight: bold;
			}

			label.components-checkbox-control__label {
				font-weight: normal;
			}
		}

		.story-settings, .slides-settings {
			.ck-color-grid {
				--ck-color-grid-tile-size: 18px;
				max-height: 250px;
				overflow: hidden auto;
			}
		}

		.story-settings {
			.ck-editor {
				margin-bottom: 15px;
			}
		}

		.slides-settings {
			.heading {
				margin-bottom: 15px;
			}

			.slide-panel {
				.input-label {
					font-size: 14px;
					font-weight: bold;
				}

				.ck-editor {
					margin-bottom: 15px;
				}

				.flex-center {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
}




// Legacy code downhere

.jeo-mapblock.storymap {
	font-family: var(--globalFontFamily), sans-serif;;
	overflow-anchor: none;
}

.ck.ck-balloon-panel, .ck.ck-toolbar__items {
	z-index: 9999999 !important;
}

.ck.ck-toolbar[aria-label="Dropdown toolbar"] {
	width: 240px;
}

.ck.ck-content.ck-editor__editable.ck-blurred, .ck.ck-content.ck-editor__editable.ck-focused {
	height: 300px !important;
	overflow-y: auto;
	overflow-anchor: none;
	overscroll-behavior: contain;
}

.slides-settings .storymap-content-editor {
	.ck.ck-content.ck-editor__editable.ck-blurred,
	.ck.ck-content.ck-editor__editable.ck-focused {
		height: 300px !important;
		min-height: 300px;
		max-height: 300px;
		overflow-y: auto !important;
		overflow-anchor: none;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
	}
}

.storymap-title-editor {
	.ck.ck-content.ck-editor__editable.ck-blurred,
	.ck.ck-content.ck-editor__editable.ck-focused {
		height: auto !important;
		min-height: 72px;
		max-height: 144px;
		overflow-y: auto !important;
		overflow-anchor: none;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
	}
}



.story-settings {
	width: var(--jeo-storymap-story-width);
	margin: 10px;
	background-color: #fff;
	position: absolute;
	top: 50px;
	padding: 10px;
	inset-inline-start: calc(
		var(--jeo-storymap-slides-width) + var(--jeo-storymap-panel-gap)
	);
	z-index: 10;

	.title {
		label {
			font-weight: bold;
		}
	}
	.description {
		label {
			font-weight: bold;
		}
		textarea {
			height: 150px;
		}
	}
	.storymap-description-editor {
		.ck.ck-content.ck-editor__editable.ck-blurred,
		.ck.ck-content.ck-editor__editable.ck-focused {
			height: 300px !important;
			min-height: 300px;
			max-height: 300px;
			overflow-y: auto !important;
			overflow-anchor: none;
			overscroll-behavior: contain;
			scrollbar-gutter: stable;
		}
	}
	.input-label {
		font-size: 12px;
		font-weight: bold;
	}
}

.story-settings-hide {
	width: var(--jeo-storymap-story-width);
	margin: 10px;
	background-color: #fff;
	position: absolute;
	bottom: 15%;
	padding: 10px;
	display: flex;
	inset-inline-start: calc(
		var(--jeo-storymap-slides-width) + var(--jeo-storymap-panel-gap)
	);
	z-index: 10;

	// .section-title {
	// 	margin: 0 0 0 15px;
	// }
	.show-button {
		margin-inline-start: auto;
	}
}

.current-slide-box {
	display: flex;
	flex-direction: row;
	width: 140px;
	margin-bottom: 10px;
	background-color: #fff;
	position: absolute;
	inset-inline-end: 50px;
    top: 10px;
	padding: 10px;
	font-size: 14px;
	z-index: 10;

	div {
		margin: auto;
		display: flex;
	}
}
.slides-settings {
	width: var(--jeo-storymap-slides-width);
	margin: 10px;
	padding: 10px;
	position: absolute;
	top: 50px;
	// inset-inline-start: calc(30% + 15px);
	background-color: #fff;
	z-index: 10;
	.slide-panel {
		border-inline-start: none;
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		position: relative;
		z-index: 1;

		.components-panel__body {
			min-width: 0;
			overflow: hidden;
		}

		.components-panel__body.is-opened {
			padding-inline-end: 10px;
		}

		.layer {
			padding: 10px;
			margin: 0 0 5px 0;
			cursor: pointer;
			width: 100%;
			p {
				font-size: 12px;
				margin: 2px 10px;
			}
		}
		.layers {
			display: flex;
			flex-direction: column;
		}
	}
	.slide {
		display: flex;
		flex-direction: row;
		min-width: 0;
		position: relative;
		border-radius: 6px;
		overflow: hidden;
		transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			background-color: transparent;
			opacity: 0;
			pointer-events: none;
			z-index: 2;
		}

		&.was-moved {
			animation: jeo-storymap-slide-moved 480ms ease;

			&::after {
				animation: jeo-storymap-slide-overlay 480ms ease;
			}
		}

		.slide-order-controls {
			border: 1px solid #f0f0f0;
			border-inline-end: none;
			background: transparent;
			min-width: 40px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 4px 0;
			position: relative;
			z-index: 1;

			.slide-order-button {
				min-width: 40px;
				height: 28px;
				padding: 0;
				border-radius: 0;
				justify-content: center;
			}
		}
		h2 {
			&::before {
				background: none;
				content: none;
			}
		}
	}
	.add-button {
		margin-top: 15px;
		width: 100%;
		background: rgb(240, 240, 240);
		&:focus {
			background: rgb(240, 240, 240);
		}
		div {
			margin: auto;
			display: flex;
		}
		svg {
			margin-top: auto;
			margin-bottom: auto;
			margin-inline-end: 5px;
		}
		p {
			margin: 0 0 0 5px;
		}
	}
	.lock-location-button {
		margin-top: 15px;
		width: 100%;
		background: rgb(240, 240, 240);

		&:focus {
			background: rgb(240, 240, 240);
		}
		div {
			margin: auto;
			display: flex;
		}
		svg {
			margin-top: auto;
			margin-bottom: auto;
			margin-inline-end: 5px;
		}
		p {
			margin: 0 0 0 5px;
		}
	}
	.preview-button {
		margin: 15px 0;
		width: 100%;
		background: rgb(240, 240, 240);
		&:focus {
			background: rgb(240, 240, 240);
		}
		div {
			margin: auto;
			display: flex;
		}
		svg {
			margin-top: auto;
			margin-bottom: auto;
			margin-inline-end: 5px;
		}
		p {
			margin: 0 0 0 5px;
		}
	}
	.remove-button {
		margin-top: 15px;
		width: 100%;
		background: rgb(255, 116, 116);
		&:focus {
			background: rgb(255, 116, 116);
		}
		div {
			margin: auto;
			display: flex;
		}
		svg {
			margin-top: auto;
			margin-bottom: auto;
			margin-inline-end: 5px;
		}
		p {
			margin: 0 0 0 5px;
		}
	}
	.slides-container {
		height: min( 650px, calc( 85vh - 120px ) );
		max-height: calc( 100vh - 160px );
		overflow-y: scroll;
		overflow-x: hidden;
		padding-inline-end: 16px;
		scrollbar-gutter: stable;
	}
}

@keyframes jeo-storymap-slide-moved {
	0% {
		box-shadow: 0 0 0 1px rgba( 25, 95, 147, 0.18 );
		transform: translateY( 0 );
	}

	35% {
		box-shadow: 0 8px 24px rgba( 25, 95, 147, 0.16 );
		transform: translateY( -4px );
	}

	100% {
		box-shadow: none;
		transform: translateY( 0 );
	}
}

@keyframes jeo-storymap-slide-overlay {
	0% {
		background-color: rgba( 25, 95, 147, 0.12 );
		opacity: 0.8;
	}

	35% {
		background-color: rgba( 25, 95, 147, 0.18 );
		opacity: 1;
	}

	100% {
		background-color: transparent;
		opacity: 0;
	}
}
.slides-settings-hide {
	display: flex;
	width: var(--jeo-storymap-slides-width);
	// inset-inline-style: calc(30% + 15px);
	margin: 10px;
	background-color: #fff;
	position: absolute;
	bottom: 15%;
	padding: 10px;
	z-index: 10;

	// .section-title {
	// 	margin: 0 0 0 15px;
	// }
	.show-button {
		margin-inline-start: auto;
	}
}
.storymap-controls {
	// .section-title {
	// 	margin: 0 0 15px 0;
	// }
}
.search-adress-input {
	position: absolute;
	top: 0;
	inset-inline-start: 10px;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: start;
	column-gap: 8px;
	width: min( 360px, calc( 100% - 20px ) );
	max-width: calc( 100% - 20px );
	z-index: 10;

	.jeo-geo-autocomplete__field {
		min-width: 0;
	}

	> .components-button,
	> .jeo-geo-autocomplete__button {
		align-self: start;
		margin: 4px 0 0;
	}
}
.tooltip {
	background-color: white;
	padding: 10px;
	display: none !important;
}
.lock-location-button {
	&:hover {
		~ {
			.tooltip {
				display: block !important;
			}
		}
	}
}

/*
.slides-container h2.components-panel__body-title:before {
	display: block;
   content: "=";
   font-size: 22px;
   cursor: grabbing;
}
*/

.slides-container h2.components-panel__body-title {
	display: flex;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 13px 4px;
	overflow: hidden;
}

.slides-container .components-panel__body-toggle {
	box-sizing: border-box;
	inline-size: 100%;
	overflow: hidden;
}


.editor-styles-wrapper .wp-block[data-type="jeo/storymap"] {
   max-width: 97%;
}
