.elementor-tags-list {
	display: none;
	position: absolute;
	width: 260px;
	max-height: 300px;
	overflow: auto;
	padding-block-end: 5px;
	background-color: var(--e-a-bg-default);
	box-shadow: var(--e-a-popover-shadow);
	border: var(--e-a-border);
	border-radius: 3px;
	z-index: $super-layer;

	&__group-title {
		font-weight: bold;
		font-size: 12px;
		padding: 10px 15px;
		display: flex;
		align-items: center;

		.eicon-info-circle {
			padding-inline-end: 5px;
			color: var(--e-a-color-primary-bold);
			font-size: 14px;
		}
	}

	&__item {
		font-size: 10px;
		padding: 6px 15px;
		cursor: pointer;

		&:before {
			content: '>';
			font-size: 8px;
			padding-inline-end: 5px;
		}

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

	&__teaser {
		border-block-start: 2px solid var(--e-a-border-color);
		padding-block-start: 4px;
		margin-block-start: 4px;

		&-text {
			padding: 2px 15px 8px;
			line-height: 1.5;
			font-size: 12px;
		}

		&-link {
			color: var(--e-a-color-primary-bold);
			text-decoration: underline;
			font-style: italic;
			font-weight: bold;
		}
	}
}

.elementor-dynamic-cover {
	display: flex;
	align-items: center;
	width: 100%;
	height: $control-unit;
	box-sizing: border-box; // overriding for TinyMCE environment

	&__title {
		padding: 0 8px;
		flex-grow: 1;
		@include ellipsis;
	}

	&__settings,
	&__remove {
		cursor: pointer;
		transition: var(--e-a-transition-hover);

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

	.elementor-control-type-wysiwyg & {
		margin-block-start: 10px;
	}
}

.elementor-tag-settings-popup {
	position: absolute;
	width: 260px;
	background-color: var(--e-a-bg-default);
	border: var(--e-a-border);
	box-shadow: var(--e-a-popover-shadow);
	z-index: 1;

	&:before {
		$triangle-size: 10px;

		content: '';
		position: absolute;
		top: -#{$triangle-size * 2};
		@include start(5px);
		border: $triangle-size solid transparent;
		border-block-end-color: var(--e-a-border-color);
	}

	.elementor-control {

		&-type-section {

			&:first-child {
				margin: 0;
			}
		}
	}
}

.elementor-tag-controls-stack-empty {
	background-color: var(--e-a-bg-default);
	padding: 10px;
	font-size: 13px;
	text-align: center;
}

.elementor-control-dynamic {

	input {
		// Equivalent to `3px 0 0 3px` in LTR.
		border-start-start-radius: var(--e-a-border-radius);
		border-start-end-radius: 0;
		border-end-end-radius: 0;
		border-end-start-radius: var(--e-a-border-radius);
	}

	&-switcher {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		height: $control-unit;
		cursor: pointer;
		border: var(--e-a-border-bold);
		background: var(--e-a-bg-default);
		border-inline-start-width: 0;
		// Equivalent to `0 3px 3px 0` in LTR.
		border-start-start-radius: 0;
		border-start-end-radius: var(--e-a-border-radius);
		border-end-end-radius: var(--e-a-border-radius);
		border-end-start-radius: 0;
		transition: var(--e-a-transition-hover);

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

		&.e-control-tool {
			height: 20px;
			border: 0;
		}

		&-wrapper {
			display: flex;
		}

		.eicon-database {
			font-size: 12px;
		}
	}

	&-value {

		.elementor-control-tag-area,
		.elementor-control-dynamic-switcher,
		.e-global__popover-toggle {
			display: none;
		}
	}
}
