$finder-z-index: 99999; // Above Theme Builder Modal

#elementor-finder {

	&__modal {
		background: none;
		z-index: $finder-z-index;

		.dialog-widget-content {
			$modal-width: 650px;
			width: $modal-width;
			max-width: 98%;
			top: 18vh;
			left: calc( 50% - #{$modal-width} / 2 );
		}

		.dialog-content {
			text-align: start;
		}

		.dialog-message {
			height: initial;
			min-height: 0;
			padding: 0;
			text-align: start;
		}
	}

	&__search {
		padding: 15px;
		display: flex;

		i {
			font-size: 16px;
			margin-inline-end: 15px;
		}

		&__input {
			border: none;
			background: none;
			outline: none;
			padding: 0;
			margin: 0;
			flex-grow: 1;
			font-size: 14px;
			box-shadow: none;

			&::placeholder {
				font-style: italic;
				font-weight: 300;
			}
		}
	}

	&__results {
		max-height: 50vh;
		overflow: auto;
	}

	&__no-results {
		display: none;
		padding: 20px;
	}

	&__lock-dialog {
		z-index: $finder-z-index + 1;
	}
}

.elementor-finder__results {

	&__category {
		position: relative;

		&__title {
			padding: 5px 25px;
			font-size: $font-size-xs;
			border-block-end: var(--e-a-border);
		}

		&--dynamic {

			.elementor-finder__results__category__items {
				min-height: 26px;
			}
		}

		.eicon-loading {
			display: none;
			position: absolute;
			@include end(10px);
			top: 30px;
			color: var(--e-a-color-info);
			font-size: 14px;
		}
	}

	&__item {
		$item-height: 35px;
		display: flex;

		a {
			text-decoration: none;
			color: inherit;
		}

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

			a {
				color: inherit;
			}
		}

		&:not(.elementor-active) {

			.elementor-finder__results__item__actions {
				display: none;
			}
		}

		&__link {
			display: flex;
			align-items: center;
			height: $item-height;
			flex-grow: 1;
		}

		&__icon {
			width: 60px;
			text-align: center;
			font-size: 17px;
		}

		&__title {
			font-size: 13px;
		}

		&__description {
			margin-inline-start: 5px;
			font-style: italic;
		}

		&__badge {
			text-transform: uppercase;
			position: absolute;
			inset-inline-end: 16px;
			font-size: 8px;
			font-weight: 500;
			display: flex;
			align-items: center;
			gap: 4px;
		}

		&__actions {
			display: flex;
		}

		&__action {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			width: $item-height;

			&:hover {
				background-color: rgba(0, 0, 0, .07);
			}
		}
	}
}
