// Elementor Global Controls
.e-global {

	&__popover {
		// Default panel width is 300px. 288px width positions it at the center of the panel by default.
		width: 288px;
		z-index: 1;
		font-size: 12px;
		padding-inline-start: 10px;

		&-toggle {
			border: var(--e-a-border-bold);
			border-inline-end: 0;
			border-start-start-radius: 3px;
			border-start-end-radius: 0;
			border-end-start-radius: 3px;
			border-end-end-radius: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: var(--e-a-transition-hover);

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

			&--active {
				color: var(--e-a-color-primary-bold);
				background-color: var(--e-a-bg-active-bold);
			}
		}

		&-container {
			box-shadow: var(--e-a-popover-shadow);
			border-radius: var(--e-a-border-radius);
			background-color: var(--e-a-bg-default);
		}

		&-title {
			padding: 15px 20px;
			font-weight: 500;
			border-block-end: var(--e-a-border);
			display: flex;

			& > i {
				margin-inline-end: 5px;
			}

			&-text {
				flex-grow: 1;
			}
		}

		&-info {
			margin-inline-end: 10px;
			display: inline-block;

			&-tooltip {
				width: 270px;
				z-index: 1;
				background-color: rgba(0,0,0,0.9);
				color: var(--e-a-color-white);
				padding: 20px;
				border-radius: 3px;

				&:after {
					content: '';
					position: absolute;
					bottom: -17px;
					@include start(16px);
					border: 10px solid transparent;
					border-block-start-color: rgba(0,0,0,0.9);
				}
			}

			i {
				font-size: 13px;
			}
		}
	}

	&__preview-items-container {
		max-height: 400px;
		overflow-y: auto;
		padding: 5px 0;

		@include webkit-scrollbar(7px, $editor-lighter, 10px)
	}

	&__manage-button {
		font-weight: 500;
		cursor: pointer;
	}

	// Typography Globals
	&__typography {
		padding-block: 10px;
		padding-inline: 35px 20px;
		@include ellipsis;

		&.e-global__preview-item--selected {

			&:before {
				font-family: 'eicons';
				font-size: 13px;
				content: '\e90e'; // eicon-check
				position: absolute;
				transform: translateY(-50%);
				top: 50%;
				inset-inline-start: 13px;
			}
		}
	}

	// Color Globals
	&__color {
		padding: 10px 20px;
		display: flex;
		align-items: center;

		&-preview {

			&-container {
				height: 20px;
				width: 20px;
				border-radius: 3px;
				border: 1px solid rgba(0, 0, 0, 0.1);
				margin-inline-end: 10px;
				flex-shrink: 0;
				position: relative;
			}

			&-color,
			&-transparent-bg {
				border-radius: 3px;
				position: absolute;
				inset: 0;
			}

			&-transparent-bg {
				@include checkers-background(12px);
			}
		}

		&-title {
			flex-grow: 1;
			@include ellipsis;
			padding-inline-end: 10px;
		}

		&-hex {
			font-size: 10px;
			color: var(--e-a-color-txt-muted);
		}

		.pcr-button {
			background-color: var(--e-a-bg-default);
		}

		&.e-global__preview-item--selected {

			.e-global__color-preview-container {
				display: flex;
				justify-content: center;
				align-items: center;
				color: var(--e-a-color-white);

				&:before {
					font-family: 'eicons';
					font-size: 13px;
					content: '\e90e'; // eicon-check
					text-shadow: 0 0 1px #000;
					z-index: 1;
				 }
			}
		}
	}

	&__preview-item {
		cursor: pointer;
		position: relative;

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

	&__confirm {

		&-delete,
		&-message-text {

			i {
				color: var(--e-a-color-warning);
			}
		}

		&-input-wrapper {
			display: flex;
			align-items: center;
			border: var(--e-a-border);
			border-radius: var(--e-a-border-radius);
			margin: 15px 0;
			padding: 2px;

			input {
				font-family: var(--e-a-font-family);
				font-size: 12px;
				padding: 2px;
				border: 0;
			}
		}
	}
}

.e-control-global {

	.elementor-control-input-wrapper {
		display: flex;
		justify-content: flex-end;
		max-width: $control-unit * 5;
		width: 100%;
	}

	&.elementor-control {

		// A hardened selector to override popover-toggle's inverse direction CSS (in _popover-toggle.scss)
		.elementor-control-input-wrapper {
			display: flex;
			flex-direction: row;
			align-items: stretch;
		}
	}

	.elementor-control-spinner {
		margin-inline-end: 4px;
	}
}
