$default-padding-vertical: 0.7rem;
$default-padding-horizontal: 1.1rem;
$default-mobile-breakpoint: 48rem;

@mixin admin-bar-height-control($given-height) {
	top: 32px;
	.makeiteasy-popup-wrapper {
		max-height: calc($given-height - 32px);
	}

	@media screen and (max-width: 782px) {
		top: 46px;
		.makeiteasy-popup-wrapper {
			max-height: calc($given-height - 46px);
		}
	}
}

.wp-block-makeiteasy-popup {
	display: none;

	.makeiteasy-popup-overlay {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Max popup height on mobile */
	$popup-max-height: calc(100dvh - 8px);
	$popup-above-close-max-height: calc($popup-max-height - (28px * 2 + 10px)); // 28 is close button height

	.admin-bar &.position-top {
		@include admin-bar-height-control($popup-max-height);
	}

	.admin-bar &:is(.position-left, .position-right) {
		@include admin-bar-height-control(100%);
	}

	&.popup-modal {
		position: fixed;
		inset: 0;
		max-width: none;

		.makeiteasy-popup-overlay {
			width: 100%;
			height: 100%;
			background: #2227;
		}

		//
		.makeiteasy-popup-wrapper {
			position: absolute;
		}
	}

	&.is-open {
		display: block;
	}

	.makeiteasy-popup-close {
		background: none;
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		padding: 2px 2px;
		margin: 0 0 0 1ch;
		align-self: flex-start;
		position: absolute;
		top: $default-padding-vertical;
		right: $default-padding-horizontal;

		svg {
			fill: var(--wp--preset--color--black, #000);
			pointer-events: none;
		}

		&:focus-visible {
			outline: var(--wp--preset--color--contrast, #242424) 1px solid;
		}
	}

	&.popup-floating {
		position: fixed;
		z-index: 99998;
		max-width: none;

		.makeiteasy-popup-overlay {
			position: absolute;
		}

		&,
		.makeiteasy-popup-overlay {
			bottom: 0;
			top: 0;
			left: 0;
			right: 0;
		}

		// if modeless overlay should be the size of the content
		&.popup-modeless .makeiteasy-popup-overlay {
			position: static;
		}

		// if popup is modeless and not fixed to screen corener, remove overlay
		&.popup-modeless:not(.popup-fixed) {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			bottom: auto;
			right: auto;
		}
	}

	.makeiteasy-popup-wrapper {
		position: relative;
		display: grid;
		grid: 1fr / 1fr auto;
		justify-content: center;
		align-items: center;
		background: var(--wp--preset--color--white, #fff);
		max-height: $popup-max-height;
		max-width: calc(100dvw - 4px);
		box-sizing: border-box;

		&.alignfull {
			width: 100dvw;
		}

		&.alignwide {
			width: var(--wp--style--global--wide-size);
		}

		&.has-above-close {
			display: flex;
			flex-flow: column nowrap;
			max-height: $popup-above-close-max-height;
		}

		@media (max-width: $default-mobile-breakpoint) {
			&.has-above-close .makeiteasy-popup-close {
				top: -2.3rem;
				right: 0;
			}
		}

		.popup-position-above::before {
			top: auto;
			bottom: -1.2rem;
			transform: translateX(-50%) rotateX(180deg);
		}
	}

	&.popup-fixed {
		.makeiteasy-popup-overlay {
			position: static;
		}

		&.popup-modeless {
			&.position-top {
				bottom: auto;
			}

			&.position-bottom {
				top: auto;
			}

			&.position-left {
				right: auto;
			}

			&.position-right {
				left: auto;
			}
		}

		.makeiteasy-popup-wrapper {
			box-sizing: border-box;
			justify-content: center;
		}

		.makeiteasy-popup-close {
			flex: none;
		}

		.makeiteasy-popup-content-wrapper.is-content-justification-center + .makeiteasy-popup-close {
			position: absolute;
			right: 3ch;
		}

		&.position-top,
		&.position-bottom {
			.makeiteasy-popup-overlay,
			.makeiteasy-popup-wrapper {
				width: 100%;
			}
		}

		// left and right panned popups
		&.position-left,
		&.position-right {
			.makeiteasy-popup-overlay,
			.makeiteasy-popup-wrapper {
				height: 100%;
			}
		}

		&.position-left,
		&.position-right {
			.makeiteasy-popup-wrapper {
				max-height: none;
			}
		}
	}

	// limit to global size if not full width nor align wide set
	.is-layout-constrained.wp-block-post-content
		&
		.makeiteasy-popup-wrapper:not(.alignwide, .alignfull)
		.makeiteasy-popup-content-wrapper {
		max-width: var(--wp--style--global--content-size);
	}

	/*** content wrapper ***/
	.makeiteasy-popup-content-wrapper {
		align-items: center;
		box-sizing: border-box;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
		// TODO: not clear if following line is needed
		// height: 100%;
		width: 100%;

		&.is-content-justification-left {
			margin-left: 0;
			margin-right: auto;
		}

		&.is-content-justification-right {
			margin-right: 0;
			margin-left: auto;
		}
	}

	// consider later rewriting this, putting this in separate viewStyle, without not
	&:not(.block-editor-block-list__block) {
		margin-block-start: 0;
	}

	&.popup-attached:not(.block-editor-block-list__block) {
		position: fixed;
		max-width: none;
	}

	&.position-top .makeiteasy-popup-wrapper {
		top: 0;
	}

	&.position-left .makeiteasy-popup-wrapper {
		left: 0;
	}

	&.position-bottom .makeiteasy-popup-wrapper {
		bottom: 0;
	}

	&.position-right .makeiteasy-popup-wrapper {
		right: 0;
	}
}

body.has-floating-popup {
	overflow: hidden;
}

.makeiteasy-popup-outermost {
	margin: 0;

	&.popup-fixed.position-top {
		margin-block-start: 0;
	}
}

// fallback padding
.makeiteasy-popup-wrapper {
	padding: $default-padding-vertical $default-padding-horizontal;
}