//
// Add New
//

body.elementor-editor-active {

	.elementor-add-section {
		// Avoid theme conflicts.
		all: initial;
		display: flex;
		max-width: 1160px;
		position: relative;
		margin-inline: auto;

		&:not(.elementor-dragging-on-child) {

			.elementor-add-section-inner {
				border: 2px dashed var(--e-a-border-color-bold);
				background-color: rgba(255, 255, 255, .5);
			}
		}

		&.elementor-dragging-on-child {

			.elementor-add-section-inner {
				border: 2px dashed var(--e-a-color-primary);
			}
		}

		&[data-view="choose-action"] {

			.e-view:not( .elementor-add-new-section ) {
				display: none;
			}
		}

		&[data-view="select-preset"] {

			.e-view:not( .elementor-select-preset ) {
				display: none;
			}
		}

		&[data-view="select-container-preset"] {

			.e-view:not( .e-con-select-preset ) {
				display: none;
			}
		}

		&[data-view="select-type"] {

			.e-view:not( .e-con-select-type ) {
				display: none;
			}
		}

		&[data-view="select-container-preset-grid"] {

			.e-view:not( .e-con-select-preset-grid ) {
				display: none;
			}
		}
	}

	.elementor-add-section-inner {
		text-align: center;
		margin: 20px;
		padding: 40px 0;
		display: flex;
		justify-content: center;
		flex-grow: 1;
	}

	.elementor-add-new-section {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 5px;
	}

	.elementor-add-section-area-button {
		padding: 12px;
		height: 40px;
		width: 40px;
		font-size: 16px;
		display: flex;
		outline: unset;
		border: unset;
		border-radius: 50%;
		box-shadow: unset;
		text-shadow: unset;
		background-color: var(--e-a-bg-active);
		color: var(--e-a-color-black);
		transition: var(--e-a-transition-hover);
		cursor: pointer;

		&:hover,
		&:focus {
    		border: unset;
			border-radius: 50%;
			box-shadow: unset;
			text-shadow: unset;
			color: var(--e-a-color-black);
			background-color: var(--e-a-bg-active-bold);
		}

		i {
			margin: 0;
		}

		&.e-button-primary {
			background-color: var(--e-a-btn-bg-primary);
			color: var(--e-a-btn-color);

			&:hover,
			&:focus {	
				background-color: var(--e-a-btn-bg-primary-hover);
				color: var(--e-a-btn-color);
			}
		}
	}

	.elementor-add-section-drag-title,
	.elementor-select-preset-title {
		font-family: var(--e-a-font-family);
		font-size: 13px;
		line-height: 1;
		color: var(--e-a-color-txt);
	}

	.elementor-add-section-drag-title {
		font-style: italic;
		font-weight: normal;
		margin-block-start: 10px;
		width: 100%;
	}

	.elementor-select-preset-title {
		font-weight: 500;
		text-transform: uppercase;
	}

	.elementor-add-section-close,
	.elementor-add-section-back,
	.flex-preset-button,
	.grid-preset-button {
		padding: unset;
		margin: unset;
		border: unset;
		border-radius: unset;
		outline: unset;
		box-shadow: unset;
		text-shadow: unset;
		color: var(--e-a-color-txt);
		background-color: transparent;
	}

	.elementor-add-section-close {
		inset-inline-end: 40px;
	}

	.elementor-add-section-back {
		inset-inline-start: 40px;
		@if 'rtl' == $direction {
			transform: scaleX(-1);
		}
	}

	.elementor-add-section-close,
	.elementor-add-section-back {
		position: absolute;
		inset-block-start: 40px;
		font-size: 20px;
		cursor: pointer;
		line-height: 1;
		color: var(--e-a-color-txt);
		border-radius: 50%;
		box-shadow: unset;
		text-shadow: unset;

		&:hover,
		&:focus {
    		border: unset;
			border-radius: 50%;
			box-shadow: unset;
			text-shadow: unset;
			color: var(--e-a-color-txt-hover);
			background-color: var(--e-a-bg-hover);
		}
	}

	.flex-preset-button,
	.grid-preset-button {

		&:hover,
		&:focus {
			background-color: transparent;
			color: var(--e-a-color-txt-hover);
		}
	}

	.elementor-select-preset-list {
		display: flex;
		gap: 20px;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin: 20px auto 0;
		max-width: 700px;

		.elementor-preset {
			cursor: pointer;
			flex-basis: 90px;
			padding: unset;
			margin: unset;
			border: unset;
			border-radius: unset;
			outline: unset;
			box-shadow: unset;
			text-shadow: unset;
			background-color: unset;

			path,
			rect {
				fill: var(--e-a-bg-active-bold);
				transition: .3s all;
			}

			&:hover,
			&:focus {
				background-color: transparent;
		
				path,
				rect {
					fill: var(--e-a-color-txt);
				}
			}

			.e-preset--container {
				position: relative;
				display: flex;

				&::before {
					content: var( --text );
					font-family: var(--e-a-font-family);
					font-size: 13px;
					font-weight: 500;
					position: absolute;
					left: 50%;
					top: 50%;
					color: var(--e-a-color-white);
					transform: translate( -50%, -50% );
				}
			}

			svg {
				height: 50px;
				width: 100%;

				@if 'rtl' == $direction {
					transform: rotate(180deg);
				}
			}
		}
	}

	.elementor-add-section {

		&[data-view="choose-action"] {

			.elementor-add-section-back {
				display: none;
			}
		}

		&[data-view="select-preset"] {

			.elementor-add-section-back {
				display: none;
			}
		}

		&[data-view="select-type"] {

			.elementor-add-section-back {
				display: none;
			}
		}
	}

	#elementor-add-new-section {
		margin: 60px auto;

		&[data-view="choose-action"] {

			.elementor-add-section-close {
				display: none;
			}
		}
	}

	.elementor-add-section-inline {
		margin: 10px auto;
		width: 100%;
	}

}