body {
	--e-editor-navigator-width: 240px;
	--e-editor-navigator-indicator-width: 3px;
	--e-editor-navigator-promotion-height: 30px;
}

#elementor-navigator {
	position: fixed;
	top: 100px;
	width: var(--e-editor-navigator-width);
	height: 50vh;
	@include end(30px);
	background-color: var(--e-a-bg-default);
	border: var(--e-a-border);
	box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
	user-select: none;
	overflow: hidden; // Ensure the bottom border radius is visible
	z-index: 100; // Above the Responsive Bar
	display: none;

	body.elementor-navigator-docked & {
		inset: 0;
		inset-inline-start: auto;
		height: 100%;
	}

	body:not(.elementor-navigator-docked) & {
		border-radius: 5px;
	}

	&__inner {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	&__header {
		display: flex;
		align-items: stretch;
		border-block-end: var(--e-a-border);
		color: var(--e-a-color-txt-accent);

		&__title {
			flex: 1;
			text-align: center;
			font-size: 13px;
			font-weight: 400;
			padding: 10px 0;
			cursor: move;
		}

		iframe + &__title,
		#elementor-navigator__ai-titles + &__title {
			padding-inline-end: 17.5px;
		}
		
	}

	&__ai-titles {
		width: 35px;
		text-align: center;
		cursor: pointer;
		background-color: transparent;
		border: none;
		outline: none;

		&:hover {
			color: $e-pink-600;
		}
	}

	&__close,
	&__toggle-all {
		color: var(--e-a-color-txt);
		background-color: transparent;
		border: none;
		outline: 0;
		padding: 10px;
		cursor: pointer;
		transition: color .5s;

		&:hover {
			color: var(--e-a-color-txt-hover);
		}

		&:focus {
			color: var(--e-a-color-txt-active);
		}
	}

	&__toggle-all {
		font-size: 13px;
	}

	&__close {
		font-size: 11px;
	}

	&__elements {
		flex-grow: 1;
		overflow: auto;
		position: relative;

		.elementor-navigator-docked & {
			height: calc(100% - 35px);
		}

		.elementor-nerd-box {
			padding: 25px;
		}

		> .elementor-navigator__element-section {
			border-block-end: var(--e-a-border);
		}
	}

	&__footer {
		width: 100%;
		text-align: center;

		&__resize-bar {
			border-block-start: var(--e-a-border);

			.elementor-navigator-docked & {
				display: none;
			}
		}

		&__promotion {
			font-size: 12px;
			padding: 4px 17px;
			font-family: 'Roboto', sans-serif;
			color: var(--e-a-bg-logo);
			min-height: var(--e-editor-navigator-promotion-height);
			display: flex;
			justify-content: center;
			align-items: center;

			a {
				color: var(--e-a-color-accent-promotion);
				margin-inline-start: 1px;
			}
		}
	}
}

.elementor-navigator {

	&__item {
		position: relative;
		display: flex;
		height: 30px;
		cursor: pointer;
		transition: padding .5s linear;
		overflow: hidden;

		&:hover,
		&:focus {
			background-color: var(--e-a-bg-hover);
		}

		&:active {
			background-color: var(--e-a-bg-active);
			color: var(--e-a-color-txt-accent);
		}

		&[data-locked="true"] {
			cursor: not-allowed;
		}

		&:not(.elementor-active) {

			.elementor-navigator__element__list-toggle {

				i {
					transform: rotate(getValueByDirection(-90deg, 90deg));
				}
			}
		}

		> * {
			display: flex;
			align-items: center;
		}

		+ .elementor-navigator__elements {
			display: none;
		}
	}

	&__elements {

		> .elementor-navigator__element-section,
		> .elementor-navigator__element-container:not(:last-child) {
			border-block-end: var(--e-a-border);
		}

		.elementor-empty-view {
			padding: 10px;

			&__title {
				margin-inline-start: 34px;
				font-size: 10px;
				font-style: italic;
			}
		}

		.ui-sortable-helper {
			box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.1);
			transform: rotate(4deg);
			background-color: var(--e-a-bg-active);
			color: var(--e-a-color-txt-accent);
			pointer-events: none;
		}

		.ui-sortable-placeholder {
			background-color: var(--e-a-bg-hover);
		}
	}

	&__element {

		&.elementor-dragging-on-child {

			> .elementor-navigator__elements {

				> .elementor-empty-view {
					border-block-start: var(--e-a-border);

					.elementor-empty-view__title {
						display: none;
					}

					+ .ui-sortable-placeholder {
						display: none;
					}
				}
			}
		}

		&:not(.elementor-navigator__element--has-children) {

			.elementor-navigator__element__list-toggle {
				visibility: hidden;
			}
		}

		&:not(.elementor-navigator__element--hidden) {

			> .elementor-navigator__item {

				.elementor-navigator__element__toggle {
					color: var(--e-a-color-txt-default);

					&:hover {
						color: var(--e-a-color-txt-hover);
					}
				}

				&:not(:hover) {

					.elementor-navigator__element__toggle {
						display: none;
					}
				}
			}

			> .elementor-navigator__item {

				&.elementor-editing {
					background-color: var(--e-a-bg-active);
				}
			}
		}

		&__list-toggle {
			margin-inline-end: 7px;
			transition: transform .3s;
		}

		&__element-type {
			margin-inline-end: 8px;
			font-size: 14px;
		}

		&__title {
			flex-grow: 1;
			overflow: hidden;

			&__text {
				white-space: nowrap;
				user-select: text;

				&[contenteditable="true"] {
					outline: none;
					background-color: var(--e-a-bg-hover);
					padding: var(--e-admin-border-radius);
					border: var(--e-a-border);
				}

				&:not([contenteditable="true"]) {
					padding: 3px 0;
					@include ellipsis;
				}
			}
		}

		&__toggle {
			position: absolute;
			@include end(15px);
			height: 100%;
			z-index: 0;
			font-size: 13px;
		}

		&__indicators {
			position: relative;
			transition: transform .5s;
			z-index: 91;

			&:not(:hover) {
				$transform: getValueByDirection(calc(100% - var(--e-editor-navigator-indicator-width)), calc(-100% + var(--e-editor-navigator-indicator-width)));

				transform: translateX($transform);
			}
		}

		&__indicator {
			height: 100%;
			width: 31px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			color: var(--e-a-color-txt);
			background-color: var(--e-a-bg-default);
			border-inline-end: var(--e-a-border);

			&:first-child {
				border-inline-start: var(--e-editor-navigator-indicator-width) solid var(--e-a-border-color-accent);
			}

			&:hover {
				color: var(--e-a-color-txt-hover);
			}
		}

		&--hidden {

			.elementor-navigator__element__title,
			.elementor-navigator__element__toggle {
				opacity: .5;
			}
		}
	}

	&__promotion-text {
		line-height: 18px;
	}
}
