//
// Panel Controls
//

.elementor-control {
	background-color: #fff;
	position: relative;
	padding: 0 20px 15px;

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

		&:hover {
			border-bottom-color: inherit;
		}
	}

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

	&.elementor-control-type-divider {
		padding: 0;
		margin-bottom: -1px; // Cover next control's separator before
		z-index: 1; // Cover next control's separator before
		background-color: transparent;

		hr {
			border-bottom-width: 0;
			border-top-width: 1px;
			border-color: $editor-background;
			border-style: solid;

			&.elementor-divider-style {

				&--thick {
					border-top-width: 1px;
				}

				&--default {
					margin-right: 20px;
					margin-left: 20px;
				}
			}
		}

		+ .elementor-control:not(.elementor-control-type-section) {
			padding-top: 15px;
		}
	}

	&.elementor-control-separator- {

		&default:not(.elementor-control-type-divider) {

			// WP Widgets
			&.elementor-control-wp {
				margin-top: 15px;

				&:before {
					content: '';
					height: 1px;
					display: block;
					margin-bottom: 15px;
					background-color: transparent;
				}
			}
		}

		&before {
			padding-top: 15px;

			&:before {
				content: '';
				position: absolute;
				height: 1px;
				width: 100%;
				top: 0;
				left: 0;
				background-color: $editor-lightest;
			}
		}

		&after {

			&:after {
				content: '';
				position: absolute;
				height: 1px;
				width: 100%;
				bottom: 0;
				left: 0;
				background-color: $editor-lightest;
			}

			+ .elementor-control-type-tabs,
			+ .elementor-control-separator-default {
				padding-top: 15px;
			}
		}
	}

	&.elementor-control-deprecated {
		color: $editor-warning;

		.elementor-control-field-description {
			color: $editor-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- {

		&desktop {

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

		&tablet {

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

		&mobile {

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

	//Select
	&.elementor-control-type-select {

		.elementor-control-input-wrapper {
			position: relative;
			select {
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;
				color: $editor-darkest;
				font-size: 12px;
				font-family: inherit;
				font-weight: inherit;
				font-style: inherit;
				text-transform: inherit;
				letter-spacing: inherit;
				line-height: inherit;
				flex-basis: 100%;
				@include padding-start(5px); //fix for Chrome
				@include padding-end(20px);
				cursor: pointer;
			}

			&:after {
				font-family: eicons;
				content: '\e955';
				font-size: 12px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				@include end(5px);
				pointer-events: none;
			}
		}
	}

	// select2
	.select2-container {
		width: 100% !important;
		outline: none;

		&:not(.select2-container--open):not(.select2-container--focus) {

			.select2-selection--single,
			.select2-selection--multiple {
				border-color: $editor-lightest;
			}
		}

		&.select2-container--open,
		&.select2-container--focus {

			.select2-selection--single,
			.select2-selection--multiple {
				border-color: $editor-light;
			}
		}

		&.select2-container--default {

			.select2-selection {
				border-radius: 3px;
			}

			.select2-selection--multiple {

				.select2-selection__clear {
					display: none;
				}

				.select2-selection__choice {
					line-height: 1.5;
					font-size: 0.9em;
					border: none;
					border-radius: 0;
				}
			}

			.select2-selection__rendered {
				line-height: 27px;
			}
		}
	}

	.select2-selection {
		outline: none;

		&--single {
			height: 27px;
		}
	}

	.select2-selection__rendered {
		line-height: 27px;
	}

	.select2-selection__arrow {
		height: 27px;
		top: 0;
	}
}

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

	&.elementor-open {

		.elementor-panel-heading-toggle {

			.fa {

				&:before {
					content: '\f0d7';
				}
			}
		}
	}

	&:not(.elementor-open) {

		.elementor-panel-heading-toggle {

			.fa {

				&:before {
					content: getValueByDirection('\f0da', '\f0d9');
				}
			}
		}
	}
}

.elementor-panel-heading {
	display: table;
	table-layout: fixed;
	height: 40px;
	padding: 0 20px;
	width: 100%;
	border-bottom: 1px solid $editor-background;
	cursor: pointer;

	> * {
		display: table-cell;
		vertical-align: middle;
	}

	&-toggle {
		width: 20px;
		color: $editor-darkest;
	}

	&-title {
		color: $editor-darkest;
		font-weight: bold;
	}
}

// WP Widgets
.elementor-control-wp {
	line-height: 1.5;

	p {
		margin: 15px 0;
	}
}

.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%;
				margin-top: 10px;
			}
		}
	}

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

		> .elementor-control-content {

			> .elementor-control-field {

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

.elementor-label-inline {

	> .elementor-control-content {

		> .elementor-control-field {

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

			> .elementor-control-input-wrapper {
				width: 55%;
			}
		}
	}
}

.elementor-control-field-description {
	@extend .elementor-descriptor;

	margin-top: 10px;
}

.elementor-group-control-attachment_alert {

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

.elementor-required {
	color: $editor-warning;
}

.elementor-choices {
	display: table;
	width: 100%;
	height: 27px;
	background-color: $editor-light;
	text-align: center;
	border-spacing: 1px;
	border-radius: 3px;

	input {
		display: none;

		&:checked + .elementor-choices-label {
			color: #fff;
		}

		&:not(:checked) + .elementor-choices-label {
			background-color: #fff;
			color: $editor-light;

			&:nth-child(2) {
				border-radius: getValueByDirection(3px 0 0 3px, 0 3px 3px 0);
			}

			&:last-child {
				border-radius: getValueByDirection(0 3px 3px 0, 3px 0 0 3px);
			}
		}
	}

	.elementor-choices-label {
		display: table-cell;
		vertical-align: middle;
		font-size: 12px;
		transition: all .5s;
		cursor: pointer;
	}
}

.elementor-slider {
	display: inline-block;
	margin-top: 10px;
	height: 4px;
	background-color: $editor-light;
	border-radius: 5px;
	position: relative;
	width: 70%;

	.ui-slider-handle {
		height: 16px;
		width: 16px;
		background-color: #fff;
		display: inline-block;
		top: 50%;
		transform: translateY(-50%) translateX(-8px);
		position: absolute;
		box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		cursor: pointer;
	}
}

.elementor-slider-input {
	width: 30%;
	float: $end;

	input {
		max-width: 80%;
		float: $end;
		padding: 5px 5px;
	}
}

.elementor-units-choices {
	flex-grow: 1;
	text-align: $end;

	input {
		display: none;

		&:not(:checked) + label {
			color: $editor-lighter;
		}

		&:checked + label {
			text-decoration: underline;
		}
	}

	label {
		cursor: pointer;
		padding: 0 2px;
		text-transform: uppercase;
		font-size: 9px;
	}
}

@if $direction == rtl {

	.elementor-control-start-end {

		.eicon-h-align-left, .eicon-h-align-right {
			transform: rotate(180deg);
		}
	}
}

.elementor-control-responsive-switchers {
	display: flex;
	margin: 0 5px;

	.elementor-responsive-switcher {
		$icon-size: 18px;

		display: inline-block;
		border-radius: 50%;
		height: $icon-size;
		width: $icon-size;
		background-color: $editor-light;
		cursor: pointer;
		position: relative;
		@include margin-start(5px);
		color: #fff;
		font-size: 8px;
		text-align: center;
		transition: background-color .5s;

		&:hover {
			background-color: $editor-lighter;
		}

		i {
			position: relative;
			display: block;
			line-height: $icon-size;

			&:before {
				height: $icon-size;
				width: $icon-size;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
}

.elementor-device-desktop #elementor-panel .elementor-panel-controls-stack:not(.elementor-responsive-switchers-open) .elementor-responsive-switcher {
	background: $editor-lighter;

	&:not(.elementor-responsive-switcher-desktop) {
		display: none;
	}
}

.elementor-responsive-switcher-mobile {

	.elementor-device-mobile & {
		background-color: $editor-info;
	}
}

.elementor-responsive-switcher-tablet {

	.elementor-device-tablet & {
		background-color: $editor-info;
	}
}

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

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

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

// = Choices control for alignment
.elementor-control-text_align,
.elementor-control-align,
.elementor-control-position {

	.elementor-choices {
		direction: ltr; // Force ltr also in RTL languages
	}
}

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

	&ltr {
		direction: ltr;
	}

	&rtl {
		direction: rtl;
	}
}

@import "controls/media";

@import "controls/dimensions";

@import "controls/url";

@import "controls/section";

@import "controls/color";

@import "controls/wysiwyg";

@import "controls/icon";

@import "controls/gallery";

@import "controls/structure";

@import "controls/image-dimensions";

@import "controls/code";

@import "controls/wp-widget";

@import "controls/tabs";

@import "controls/repeater";

@import "controls/textarea";

@import "controls/box-shadow";

@import "controls/text-shadow";

@import "controls/switcher";

@import "controls/order";

@import "controls/hidden";

@import "controls/popover-toggle";

@import "controls/button";

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