@import "conditions-api";

.e-site-editor-conditions {
	&__header {
		text-align: center;
	}

	&__header-image {
		display: block;
		margin: 0 auto $e-site-editor-conditions-header-image-button-spacing;
		width: $e-site-editor-conditions-header-image-width;
	}

	&__rows {
		margin: $e-site-editor-conditions-rows-y-spacing auto;
		max-width: $e-site-editor-conditions-rows-max-width;
	}

	&__row {
		display: flex;
		flex-grow: 1;
		margin-top: $e-site-editor-conditions-row-top-spacing;
	}

	&__remove-condition {
		color: $e-site-editor-conditions-remove-condition-color;
		font-size: $e-site-editor-conditions-remove-condition-font-size;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&__row-controls {
		overflow: hidden;
		@include margin-end($e-site-editor-conditions-row-controls-spacing-end);
		background-color: var(--e-site-editor-conditions-row-controls-background);
		display: flex;
		width: 100%;
		box-shadow: $e-site-editor-conditions-row-controls-shadow;
		border-radius: $e-site-editor-conditions-row-controls-radius;

		&--error {
			border: $e-site-editor-conditions-row-controls-error-border;
		}
	}

	&__conflict {
		text-align: center;
		margin-top: $e-site-editor-conditions-conflict-top-spacing;
		color: $e-site-editor-conditions-conflict-color;
	}

	&__row-controls-inner {
		width: 100%;
		display: flex;

		div {
			flex: 1;
		}
	}

	&__add-button-container {
		text-align: center;
	}

	&__add-button {
		margin-top: $e-site-editor-add-button-margin-top;
		background-color: var(--e-site-editor-add-button-background-color);
		color: $e-site-editor-add-button-color;
		text-transform: uppercase;

		&:hover {
			background-color: var(--e-site-editor-add-button-color-hover-background-color);
			color: $e-site-editor-add-button-color-hover-color;
		}
	}

	&__footer {
		display: flex;
		justify-content: flex-end;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		padding: $e-site-editor-save-button-container-spacing;
		border-top: 1px solid var(--hr-color);
	}

	&__input-wrapper {
		position: relative;
		@include border-start($e-site-editor-input-wrapper-border-width $e-site-editor-input-wrapper-border-style);
		border-color: var(--e-site-editor-input-wrapper-border-color);

		&:first-child {
			border: none;
		}

		select {
			appearance: none;
			-webkit-appearance: none;
			font-size: $e-site-editor-input-wrapper-select-font-size;
			height: $e-site-editor-input-wrapper-select-height;
			border-width: 0;
			padding: 0 $e-site-editor-input-wrapper-select-y-padding;
			width: 100%;
			position: relative;
			color: var(--e-site-editor-input-wrapper-select-color);
			outline: none;
			background: transparent;
		}

		&:after {
			font-family: eicons;
			content: '\e8ad';
			font-size: $e-site-editor-input-wrapper-select-arrow-font-size;
			pointer-events: none;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			@include end($e-site-editor-input-wrapper-select-arrow-margin-end);
		}

		.select2-container--default .select2-selection--single {
			border: none;
			line-height: $e-site-editor-input-wrapper-select-height;
		}

		.select2-container--default .select2-selection--single .select2-selection__rendered {
			line-height:  $e-site-editor-input-wrapper-select-height;
			font-size: $e-site-editor-input-wrapper-select-font-size;
		}

		.select2-selection {
			outline: none;
			background: transparent;
			height: $e-site-editor-input-wrapper-select-height;
		}

		.select2-selection__arrow {
			display: none;
		}
	}

	&__input-wrapper--condition-type {
		position: relative;

		&:before {
			font-family: eicons;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			@include start($e-site-editor-input-wrapper-condition-type-icon-start-spacing);
			font-size: $e-site-editor-input-wrapper-condition-type-icon-font-size;
			color: $e-site-editor-input-wrapper-condition-type-icon-color;
			pointer-events: none;
			z-index: $e-site-editor-input-wrapper-condition-type-icon-z-index;
		}

		&:after {
			color: $e-site-editor-input-wrapper-condition-type-arrow-color;
		}

		select {
			text-transform: uppercase;
			@include padding-start($e-site-editor-input-wrapper-condition-type-start-padding);
			width: $e-site-editor-input-wrapper-condition-type-width;
			font-size: $e-site-editor-input-wrapper-condition-type-font-size;
			color: $e-site-editor-input-wrapper-condition-type-color;
		}

		&[data-elementor-condition-type="include"] {
			&:before {
				content: '\e8cc';
			}

			select {
				background-color: var(--e-site-editor-input-wrapper-condition-include-background-color);
			}
		}

		&[data-elementor-condition-type="exclude"] {
			&:before {
				content: '\e8cd';
			}

			select {
				background-color: var(--e-site-editor-input-wrapper-condition-exclude-background-color);
			}
		}
	}
}

// This is a temporary fix that handles dark mode in select2.
// TODO: Remove it if already handled by the Select2 component.
.select2-search__field {
	background-color: transparent;
	color: var(--e-site-editor-input-select2-search-field-color);
}