@use '../../../design/scss/_variables.scss' as *;
@use '../../../design/scss/_mixins.scss';
@use '../../../design/scss/_placeholders.scss';

// ==========================================================================
// AdPresso Modal Styles
// ==========================================================================

.components-modal__screen-overlay:has(.adpresso-entity-editor-modal) {
	background-color: rgba(255, 255, 255, 0.75);
}

.adpresso-entity-editor-modal {
	border: $border-small solid $color-primary;

	.components-modal__content {
		margin: 0;
		padding: 3em;
		overflow: hidden;
		display: flex;
		flex-grow: 1;
		min-height: 0;
		flex-direction: column;

		> div:not(.components-modal__header) {
			display: flex;
			flex-grow: 1;
			flex-direction: column;
			min-height: 0;
		}
	}

	.components-modal__header {
		display: none;
	}
}


// Main-Modal-Container
// This is from the <Modal> component created main div.
.adpresso-entity-editor-modal.components-modal__frame {
	font-size: $font-size-base;
	width: calc(100% - 223px - 63px); // Minus left and right margin.
	height: calc(100% - 95px - 63px); // Minus top and bottom margin.
	max-height: 100%;
	margin: 95px 63px 63px 223px;
	display: flex;
	flex-direction: column;
	overflow: visible !important;
	box-shadow: none;
	border-radius: 2em;
	transition: width 400ms ease, height 400ms ease, margin 400ms ease, max-width 400ms ease;
	color: $color-text-active;

	//@media (max-width: 1300px) {
	&.is-fullscreen {
		margin: 0;
		height: 100%;
		width: 100%;
		max-width: 100%;
	}
}

// The internal wrapper for our content.
.adpresso-modal-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	overflow: hidden;

	&.adpresso-shortcode-builder {
		.adpresso-modal-header {
			justify-content: flex-end;
		}
	}
}


// The modal header.
.adpresso-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
	box-sizing: border-box;
	margin-bottom: 3em;
	gap: 2em;

	.adpresso-modal-title {
		flex-grow: 1;
		text-align: center;

		.adpresso-input {
			width: clamp(25ch, 50%, 100ch);
			max-width: 100%;
			font-size: 1.5em;
			line-height: 1em;
			border-width: calc(0.12em / 1.5 * $font-size-rate);
			padding: 0.65em;
		}
	}

	.adpresso-modal-navigation {

		button:first-of-type {
			margin-right: $space-4;
		}

		svg {
			width: 2em;
			height: 2em;
		}
	}
}


// Modal content.
.adpresso-modal-sections {
	overflow-y: auto;
	flex-grow: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: start;
	gap: 4em;
	padding-right: 4em;
	align-content: start;

	.adpresso-modal-section {
		margin-bottom: 4em;
		display: contents;

		&:last-child {
			margin-bottom: 0;
		}

		.adpresso-modal-section-title {
			grid-column: 1;
			display: flex;
			align-items: flex-start;
			gap: $space-3;
			font-size: $font-size;
			font-weight: 600;
			cursor: pointer;
			white-space: nowrap;
			margin-bottom: 1.5em;
			margin-top: 0;
			padding-bottom: 1em;

			&::before {
				font-family: 'dashicons', serif;
				content: '\f140';
				font-size: 1.5em;
				transition: transform 0.2s ease-in-out;
			}
		}

		.adpresso-modal-section-fields,
		.adpresso-modal-section-summary {
			grid-column: 2;
		}

		.adpresso-modal-section-summary {
			white-space: nowrap;
			overflow: hidden;
			cursor: pointer;
			font-size: $font-size;

			.is-set {
				color: $color-accent;
				font-weight: 500;
			}

			.is-not-set {
				color: $color-icon;
			}
		}

		// Logic for the section arrow.
		.adpresso-modal-section.is-open {
			.adpresso-modal-section-title::before {
				transform: rotate(90deg);
			}
		}

		.adpresso-modal-section-fields {
			grid-column: 2 / 3;

			> div {
				margin-bottom: 2em;

				&:last-of-type {
					margin-bottom: 0;
				}
			}

			.adpresso-label {
				display: block;
				margin-bottom: 1em;
			}

			.adpresso-input {
				width: 100%;
				border-width: $border-small;

				&::placeholder {

				}
			}

			.is-premium {
				.adpresso-label {
					color: $color-premium;
				}

				.adpresso-input {
					border-color: $color-premium;

					&::placeholder {
						color: $color-premium;
					}
				}
			}
		}

		&.is-collapsed {
			.adpresso-modal-section-title::before {
				transform: rotate(-90deg);
			}

			// Blende die Felder aus
			.adpresso-modal-section-fields {
				display: none;
			}
		}
	}
}


// Modal Footer
.adpresso-modal-footer {
	margin-top: 3em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;

	.adpresso-footer-left {
		display: inline-flex;
		align-items: center;

		.adpresso-premium-label {
			font-size: $font-size;
		}
	}

	.adpresso-footer-center {
	}

	.adpresso-footer-right {
	}

	button.adpresso-btn-action {
		font-size: calc(1.5em * $font-size-rate);
	}
}


// The loading spinner
.adpresso-modal-spinner {
	@include mixins.flex-center;
	position: absolute;
	inset: 0; // Fills the whole modal.
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 10;
}