/**
 * The following styles get applied inside the editor only.
 */

.wp-block-makeiteasy-popup {
	display: flex;
	width: fit-content;
	min-width: 15ch;
	min-height: 4rem;

	&.alignwide,
	&.alignfull {
		// fix when content is not supposed to be constrained, but alignwide and alignfull are set because of style.scss
		.makeiteasy-popup-content-wrapper:not(.is-layout-constrained) {
			max-width: none !important;
		}

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

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

	&.alignfull {
		width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
		margin-right: calc(var(--wp--style--root--padding-right) * -1);
		margin-left: calc(var(--wp--style--root--padding-left) * -1);
	}

	.makeiteasy-popup-wrapper {
		width: 100%;
		margin: 0 auto;
		max-height: none;

		&.makeiteasy-popup-wrapper {
			position: static;
		}
	}

	.makeiteasy-popup-content-wrapper {
		overflow: visible;
	}

	&.disabled {
		// TODO: rework this, repeating linear gradient works well only with transparent background
		.makeiteasy-popup-wrapper::after {
			content: "";
			display: block;
			position: absolute;
			inset: 0;
			background: repeating-linear-gradient(-45deg, #38383878, #38383878 15px, #5c5c5cb0 15px, #5c5c5cb0 18px);
		}
		// filter: saturate(35%) brightness(35%);

		.makeiteasy-popup-wrapper {
			background: none;
		}
	}

	&.wp-block-makeiteasy-popup {
		opacity: 1;
		z-index: auto;
	}

	/* block element classes */

	&.is-hidden {
		display: none !important;
	}

	&.wp-block-makeiteasy-popup {
		position: relative;
	}

	&.popup-floating {
		.makeiteasy-popup-overlay {
			position: unset;
			display: block;
		}

		&,
		.makeiteasy-popup-overlay {
			bottom: unset;
			top: unset;
			left: unset;
			right: unset;
			display: block;
			background: none;
			width: auto;
		}
	}

	&.popup-fixed {
		&.popup-fixed.popup-fixed {
			max-width: none;
		}

		.makeiteasy-popup-overlay {
			width: 100%;
		}

		.makeiteasy-popup-wrapper {
			position: relative;
		}
	}

	&.popup-attached {
		.makeiteasy-popup-overlay {
			position: relative;
		}

		.makeiteasy-popup-wrapper {
			position: unset;
		}
	}

	/* end of block element classes */

	.makeiteasy-popup-close {
		cursor: default;
	}

	@at-root .admin-bar &.position-top .makeiteasy-popup-wrapper {
		top: auto;
	}
}

/*
 * Plugin Sidebar
 */

.editor-sidebar__panel {
	.makeiteasy-popup-days-to-show-again {
		width: 100%;

		.components-base-control__field > * {
			display: block;
		}

		.components-text-control__input {
			width: 10ch;
		}
	}

	.mie-modality-type {
		display: block;
	}

	.mie-popup-width-control {
		.components-base-control__help {
			width: 40ch;
		}
	}

	// space in panel between controls
	.mie-editor-panel-space {
		margin-top: 1rem;
	}

	.mie-editor-panel-space-2 {
		margin-top: 2rem;
	}

	.mie-editor-panel-space-after {
		margin-bottom: 1.5rem;
	}

	.mie-short-input {
		.components-input-control__container {
			width: 15ch;
		}
	}

	.mie-small-font {
		.components-base-control__label,
		.components-base-control__help {
			font-size: 0.65rem;
		}
		.components-text-control__input {
			font-size: 0.7rem;
			padding: 4px 6px;
			height: auto;
		}
	}

	.mie-full-grid-width {
		grid-column: 1 / -1;
	}

	// welcome guide

	.mie-welcome-guide-button-container {
		display: flex;
		justify-content: flex-start;
		padding: 0.5em 16px;
	}

	.mie-welcome-guide-button.mie-welcome-guide-button.mie-welcome-guide-button {
		background-color: #49829e;
	}
}

// welcome guide

.components-modal__frame.components-guide {
	max-height: 685px;
}