@import "../../../../../assets/dev/scss/helpers/variables";

//
// Panel Controls
//

.elementor-control {
	--control-title-size: 12px;
	position: relative;
	padding: 0 20px 15px;

	a {
		font-weight: 500;
		text-decoration: none;
		border-block-end: 1px dotted transparent;
		transition: all ease-in-out .3s;

		&:hover {
			border-block-end-color: inherit;
		}
	}

	//Avoid collapsing margin in the repeater control
	.elementor-control-content {
		display: flex;
		flex-direction: column;
	}

	.elementor-control-title {
		font-size: var(--control-title-size);
		line-height: 1;
		margin-inline-end: 5px;

		&:empty {
			display: none;
		}
	}

	.elementor-control-spinner {
		display: flex;
		align-items: center;
	}

	&.elementor-control-type-divider {
		padding: 0;


		.elementor-control-content {
			margin-inline: 20px;
			border-width: 0;
			border-block-start: var(--e-a-border);

			//For the next control in the panel
			background-color: var(--e-a-bg-default);
			height: 15px;
		}
	}

	&.elementor-control-separator- {

		&before {
			padding-block-start: 15px;

			&:before {
				content: '';
				position: absolute;
				inset: 0 20px auto;
				height: 1px;
				background-color: var(--e-a-border-color);
			}
		}

		&after {
			padding-block-end: 15px;

			&:after {
				content: '';
				position: absolute;
				inset: auto 20px 0;
				height: 1px;
				background-color: var(--e-a-border-color);
			}

			+ .elementor-control-type-tabs,
			&:not(.elementor-hidden-control) {
				+ .elementor-control-separator-default {
					padding-block-start: 15px;
				}
			}
		}
	}

	&.elementor-control-deprecated {
		color: var(--e-a-color-warning);

		.elementor-control-field-description {
			color:var(--e-a-color-warning);
		}
	}

	&.elementor-control-hidden-label {

		> * > .elementor-control-title, > * > * > .elementor-control-title { // Avoid repeater titles to be affected from above
			display: none;
		}
	}

	&.elementor-hidden-control {
		display: none;
	}

	&.elementor-control-type-heading {

		.elementor-control-title {
			font-weight: bold;
			margin: 0;
		}
	}

	&.elementor-control-responsive- {

		@each $device in $devices {

			&#{ $device } {
				body:not(.elementor-device-#{ $device }) & {
					display: none;
				}
			}
		}
	}

	&-shape_divider {

		&_top,
		&_bottom {
			.elementor-visual-choice-element-image label {
				padding: 4px;
			}

			img {
				aspect-ratio: 4 / 1;
				object-fit: cover;
				object-position: center;
			}
		}

		&_bottom {
			img {
				rotate: X 180deg;
			}
		}
	}

	&-custom_css_pro,
	&-custom_attributes_pro {

		.elementor-nerd-box {

			&-message {
				margin-block-start: 5px;
			}
		}
	}
}

.elementor-control,
.elementor-panel-category,
.elementor-panel-scheme-item {

	&.e-open,
	&.elementor-active{

		.elementor-panel-heading-toggle {

			i {
				transform: rotate(90deg);
			}
		}
	}

	&:not(.e-open):not(.elementor-active) {

		.elementor-panel-heading-toggle {

			i {
				scale: calc(1 * var(--direction-multiplier)) 1; // Flip in RTL
			}
		}
	}
}

.elementor-panel-heading {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 48px;
	padding-inline: 20px;
	width: 100%;
	border: 0;
	border-block-start: var(--e-a-border); //todo: remove
	border-block-start-width: 2px;
	background-color: transparent;
	color: var(--e-a-color-txt-accent);
	cursor: pointer;

	&-toggle {
		width: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	&-title {
		font-weight: bold;
	}

	&-category-chip {
		margin-inline-start: auto;
		background-color: var(--e-a-bg-chip);
		border-radius: 100px;
		padding: 5px 8px;

		i {
			margin-inline-start: 4px;
		}
	}

	&-promotion {
		margin-inline-start: auto;

		a {
			color: var(--e-a-color-accent-promotion);
			font-family: 'Roboto', sans-serif;
			font-weight: 500;
			font-size: 13px;

			i {
				margin-inline-end: 4px;
				font-size: 14px;
			}

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

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

#elementor-controls,
#elementor-panel-page-settings-controls,
#elementor-panel-editorPreferences-settings-controls {

	.elementor-control-type-section:first-child {

		.elementor-panel-heading {
			border-block-start: none;
		}
	}
}

.elementor-control-field {
	display: flex;
	align-items: center;
}

.elementor-label-block {

	> .elementor-control-content {

		> .elementor-control-field {
			flex-wrap: wrap;

			> .elementor-control-input-wrapper {
				width: 100%;
				max-width: 100%;
				margin-block-start: 10px;

				// TODO: Hack to make choices full width when label is block.
				> .elementor-choices {
					label {
						width: auto;
						flex: 1 1 27px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}

	&.elementor-control-hidden-label:not(.elementor-control-dynamic) {

		> .elementor-control-content {

			> .elementor-control-field {

				> .elementor-control-input-wrapper {
					margin-block-start: 0;
				}
			}
		}
	}

	&.elementor-control-hidden-label.elementor-label-block {

		> .elementor-control-content {

			> .elementor-control-field {

				> .elementor-control-input-wrapper {
					margin-block-start: 0;
				}
			}
		}
	}
}

.elementor-label-inline {

	> .elementor-control-content {

		> .elementor-control-field {

			> .elementor-control-title {
				flex-shrink: 0;
				max-width: 60%;
			}

			> .elementor-control-input-wrapper {
				margin-inline-start: auto;
			}
		}
	}
}

.elementor-control-field-description {
	@extend .elementor-descriptor;
	margin-block-start: 10px;
}

.elementor-group-control-attachment_alert {

	.elementor-control-field-description {
		margin-block-start: 0;
	}
}

	.elementor-control-start-end {

		.eicon-h-align-left,
		.eicon-h-align-right {
			scale: calc(1 * var(--direction-multiplier)) 1; // Flip in RTL
		}
	}

.elementor-update-preview {
	margin: 15px 15px 0;
	display: flex;
	align-items: center;
}

.elementor-update-preview-button-wrapper {
	flex-grow: 1;
	text-align: end;
}

.elementor-update-preview-button {
	padding: 8px 15px;
}

// = Set direction control by class
.elementor-control-direction- {

	&ltr {

 		input,
		textarea {
			direction: ltr;
		}
	}

	&rtl {

		input,
		textarea {
			direction: rtl;
		}
	}
}

@import "controls-utility";

@import "controls/alert";

@import "controls/button";

@import "controls/choose";

@import "controls/color";

@import "controls/control-group-css-filters";

@import "controls/dimensions";

@import "controls/gaps";

@import "controls/icons";

@import "controls/gallery";

@import "controls/globals";

@import "controls/hidden";

@import "controls/icon";

@import "controls/image-dimensions";

@import "controls/media";

@import "controls/notice";

@import "controls/popover-toggle";

@import "controls/repeater";

@import "controls/section";

@import "controls/select";

@import "controls/shadow";

@import "controls/slider";

@import "controls/structure";

@import "controls/switcher";

@import "controls/tabs";

@import "controls/textarea_and_code";

@import "controls/url";

@import "controls/visual-choice";

@import "controls/wp-widget";

@import "controls/wysiwyg";
