#elementor-new-template, #elementor-new-floating-elements {

	&-modal {

		.dialog-message {
			max-height: 70vh;
		}

		// Add specificity only here to avoid changing the global code selector.
		.e-hidden {
			display: none !important;
		}
	}

	&-dialog-content {
		display: flex;
		align-items: center;
		height: 100%;
		text-align: start;

		@media (max-width: $library_screen_breakpoint) {
			padding: 0 50px;
		}

		@media (min-width: $library_screen_breakpoint + 1) {
			padding: 0 120px;
		}
	}

	&__description {
		width: 35%;
		max-width: 300px;
		padding-inline-end: 100px;

		&__title {
			font-size: 30px;

			span {
				font-weight: bold;
			}
		}

		&__content {
			font-size: 16px;
			padding: 30px 0;
		}
	}

	&__take_a_tour {
		display: flex;
		align-items: center;
		font-size: 15px;

		i {
			color: var(--e-a-color-accent);
			font-size: 30px;
		}

		a {
			padding-inline-start: 10px;
			font-weight: 500;
		}
	}

	&__form {
		flex-grow: 1;
		max-width: 440px;
		padding: 55px;
		background-color: var(--e-a-color-white);
		border-radius: var(--e-a-border-radius);
		border: var(--e-a-border);

		&__title {
			font-size: 23px;
		}

		&__template-type.elementor-form-field__select {
			// Override new wp-core-ui class <select> width starting WP v5.3/5.4
			max-width: initial;
		}

		&__template-type-badge {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 2px;
			border-radius: 2px;
			background-color: $editor-background-light;
			padding: 4px;
			font-size: 8px;
			font-weight: 500;
			line-height: 1;
			text-transform: uppercase;
			inset-block-start: 50%;
			inset-inline-end: 28px;
			transform: translateY( -50% );
		}

		.elementor-form-field {

			&__label {
				display: block;
				margin: 25px 0 7px;
				font-size: 14px;
				line-height: 1;
			}

			input,
			select {
				width: 100%;
				height: 50px;
				padding: 10px;
				font-size: 14px;
				box-shadow: none;
				border-radius: var(--e-a-border-radius);
				background: none;
				border: var(--e-a-border-bold);
				outline: none;

				&:focus {
					border-color: var(--e-a-border-color-focus);
				}
			}

			&__select {
				appearance: none;
				cursor: pointer;

				&__wrapper {
					position: relative;

					&:after {
						font-family: eicons;
						content: '\e8ad';
						position: absolute;
						inset-block-start: 50%;
						inset-inline-end: 10px;
						transform: translateY(-50%);
					}
				}
			}
		}

		&__submit,
		&__lock_button {
			display: block;
			width: 100%;
			height: 50px;
			margin-block-start: 24px;
			box-sizing: border-box;
			text-align: center;
		}
	}
}

@media (max-width: $editor-screen-md-max) {

	#elementor-new-template {

		&__description {
			max-width: 250px;
			padding-inline-end: 30px;
		}
	}
}

@media (max-width: $editor-screen-sm-max) {

	#elementor-new-template__description {
		display: none;
	}
}
