/**
 * Styles for the stand-in that holds the editor's place until it is loaded.
 *
 * This is the only editor stylesheet that ships with the page (dist/spacesEditor.css and the CKEditor
 * variables are loaded on demand together with the editor), so it has to draw the collapsed state on
 * its own. It deliberately mirrors the mini view of SpacesEditorPost.vue / SpacesEditorComment.vue so
 * that swapping in the real editor is not visible as a jump.
 *
 * Note the class is `spaces-editor-lazy`, not `spaces-editor-placeholder`: the latter already exists
 * in the compiled bundle CSS.
 */

.spaces-editor-lazy {
	position: relative;
	cursor: text;
}

/* Pin the row explicitly: without the bundle's stylesheet, `.card-divider` would add padding and let
   the title input wrap onto a second line, which then overlaps whatever sits below the editor. */
.spaces-editor-lazy .spaces-editor-top {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
	height: 54px;
	padding: 0;
	border-bottom: 1px solid var(--f-color-border-1, #eee);
}

/* Only the post stand-in draws its own avatar box; the comment one reuses `user small`, which the
   theme sizes (`.small .avatar-container`) exactly as it does for the mounted editor. */
.spaces-editor-lazy .spaces-editor-top .avatar-container {
	flex: 0 0 auto;
	height: 100%;
}

.spaces-editor-lazy .spaces-editor-top .avatar {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spaces-editor-lazy input.spaces-editor-post-title {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 0 0 1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 1rem;
	color: var(--f-color-text-0, #000);
	text-overflow: ellipsis;
}

.spaces-editor-lazy input.spaces-editor-post-title::placeholder {
	color: var(--f-color-text-2, #767676);
	font-size: 1rem;
	cursor: text;
	opacity: 1;
}

/* The comment stand-in replaces the CKEditor body rather than a title input, so it sits under the
   author row like the real one and repeats where that lands its text (1.25rem 0, indented 3rem). */
.spaces-editor-lazy__body {
	min-height: 3.5rem;
	padding: 1.25rem 0 1.25rem 3rem;
	color: var(--f-color-text-2, #767676);
}

/**
 * While the assets are on their way the stand-in stays fully opaque and keeps accepting input (what
 * gets typed is handed to the real editor), so the only hint is a thin progress bar along the bottom.
 *
 * The bar starts transparent and its animation is delayed: loading usually takes ~0.2s, and a bar
 * that appears and vanishes within that time only reads as a flicker. The delay means it shows up
 * only when the wait is actually noticeable, and the keyframes are what turn it visible.
 */
.spaces-editor-lazy.is-loading::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	opacity: 0;
	background-image: linear-gradient(90deg, transparent, var(--f-color-brand, #1779ba), transparent);
	background-repeat: no-repeat;
	background-size: 40% 100%;
	animation: spaces-editor-lazy-progress 1.1s linear 0.3s infinite;
}

@keyframes spaces-editor-lazy-progress {
	from {
		opacity: 1;
		background-position: -40% 0;
	}

	to {
		opacity: 1;
		background-position: 140% 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.spaces-editor-lazy.is-loading::after {
		background-size: 100% 100%;
		animation: spaces-editor-lazy-appear 0s linear 0.5s forwards;
	}
}

@keyframes spaces-editor-lazy-appear {

	to {
		opacity: 1;
	}
}

.spaces-editor-lazy__error {
	margin: 0;
	padding: 0.75rem 1rem;
	color: var(--f-color-error, #c1272d);
}

/**
 * Markup added next to the editor through `spaces_editor_more_vue_markup` (e.g. defaultspace's
 * "add event" button) is shown beside the collapsed editor. Those rules normally come with the
 * bundle, so repeat them here for as long as the stand-in is on its own.
 */
.editor-mini-view .hide-in-editor-mini-view {
	display: none;
}

.editor-mini-view .show-in-editor-mini-view {
	display: block;
}