/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

// show block appender inside container, not as absolute beside
@mixin appender-inside {
	display: flex;
	gap: 12px;

	.mie-slider-inner {
		flex: 1;
	}

	.slider-external-appender {
		position: static;
		flex: none;
	}
}

.wp-block-makeiteasy-slider {
	.mie-slider-inner {
		overflow-x: scroll;
		display: flex;
		column-gap: 1rem;
		scroll-snap-type: inline mandatory;
		height: 100%;

		> * {
			scroll-snap-align: start;
			flex: 0 0 auto;
			margin: 0;
		}
	}

	&.empty-container .mie-slider-inner {
		overflow-x: auto;
		width: 100%;
	}

	// fixed slider height
	&.mie-slider-has-fixed-height {
		.wp-block-image {
			height: calc(100% - 12px);

			.components-resizable-box__container {
				height: 100% !important;

				img {
					height: 100%;
				}
			}
		}
	}

	// fix for aspect ratio not working for tall images
	&.has-aspect-ratio .mie-slider-inner {
		> figure {
			> .components-resizable-box__container {
				width: 100% !important;
				height: 100% !important;
			}
		}
	}

	// if slider is empty
	&.empty-container {
		display: flex;

		.block-list-appender {
			width: 60%;
		}
	}

	// appender
	.slider-external-appender {
		position: absolute;
		inset: 0 -60px 0 auto;

		.block-editor-inserter {
			height: 100%;
		}

		.block-editor-button-block-appender {
			height: 100%;
		}
	}

	@media (max-width: 53.75rem) {
		@include appender-inside;
	}

	&.mie-slider-restrict-width {
		@include appender-inside;
	}

	@media (max-width: 300px) {
		flex-wrap: wrap;
		.mie-slider-inner {
			width: 100%;
		}
		.slider-external-appender {
			width: 100%;
		}
	}

	&.alignfull {
		.slider-external-appender {
			inset: auto 0 1rem auto;
		}
	}

	&.mie-show-horizontal50 .mie-slider-inner > *,
	&.mie-show-horizontal50 > .block-list-appender {
		flex: 0 0 50%;
	}

	&.mie-show-vertical {
		.mie-slider-inner {
			flex-flow: column;

			> :not(:first-child) {
				margin-top: 16px;
			}

			// fix block appender
			.block-list-appender {
				position: static;
			}
		}
	}

	.wp-block-cover .wp-block-button .wp-block-button__link [data-rich-text-placeholder]::after {
		color: var(--text-color);
	}
}

/**
 * Sidebar
 */
// show spinners in sidebar control
.mie-time-between-slides,
.mie-slides-per-view {
	width: 14ch;
}

.mie-time-between-slides
	.components-input-control__label.components-input-control__label.components-input-control__label {
	overflow: visible;
}

.mie-slides-per-view .components-base-control__label {
	max-width: none;
}

.mie-time-between-slides.mie-time-between-slides .components-input-control__input {
	appearance: auto;

	&.components-input-control__input {
		padding-right: 0;
	}
}

// JSON error in textarea

.mie-JSON-error .components-textarea-control__input {
	border: 1px solid #ec2d2d !important;
	transition: 0.5s border-color;
}

.mie-json-settings {
	position: relative;

	.mie-JSON-error-message {
		position: absolute;
		padding: 0.3em 2em;
		bottom: 2.7rem;
		background: #ec2d2d;
		color: #fff;
		transition: all 0.3s;
	}
}

.mie-advanced-slider-settings-special-help {
	white-space: pre-line;
	width: 100%;
	position: relative;

	&.mie-advanced-slider-settings-special-help.mie-advanced-slider-settings-special-help {
		margin-bottom: 0;
	}
}

.mie-slider-layout-buttons {
	justify-items: center;
	--wp-components-color-foreground: #909090;
}

.mie-config-button {
	color: #ffffff;
	height: auto;
}

.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;
}

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

.mie-helpful-links {
	display: block;
}

.mie-space-between-slides {
	width: 100%;

	.components-unit-control__unit-label.components-unit-control__unit-label.components-unit-control__unit-label {
		font-size: 8px;
		min-width: auto;
		padding-right: 0;
		align-content: center;
		text-transform: uppercase;

		&.components-unit-control__unit-label {
			color: rgb(47, 47, 47);
		}
	}
}