@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;

// This needs specificity to override individual block styles.
.components-placeholder.components-placeholder {
	font-size: $default-font-size;
	box-sizing: border-box;
	position: relative;
	padding: $grid-unit-30;
	width: 100%;
	text-align: left;
	margin: 0;
	color: $gray-900;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: $grid-unit-20;

	// Some editor styles unset this.
	-webkit-font-smoothing: subpixel-antialiased;


	// Block UI appearance.
	border-radius: $radius-small;	// Match the block toolbar material radius.
	background-color: $white;
	box-shadow: inset 0 0 0 $border-width $gray-900;
	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
}

.components-placeholder__error,
.components-placeholder__instructions,
.components-placeholder__label,
.components-placeholder__fieldset {
	font-family: $default-font;
	font-size: $default-font-size;
	// Global Styles can affect this so we are resetting.
	letter-spacing: initial;
	line-height: initial;
	text-transform: none;
	font-weight: normal;
}

.components-placeholder__label {
	font-weight: 600;
	align-items: center;
	display: flex;

	> svg,
	.dashicon,
	.block-editor-block-icon {
		margin-right: $grid-unit-05;
		fill: currentColor;
		// Optimize for high contrast modes.
		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
		@media (forced-colors: active) {
			fill: CanvasText;
		}
	}

	// Don't take up space if the label is empty.
	&:empty {
		display: none;
	}
}

.components-placeholder__fieldset,
.components-placeholder__fieldset form {
	display: flex;
	flex-direction: row;
	width: 100%;
	flex-wrap: wrap;
	gap: $grid-unit-20;
	justify-content: flex-start;

	p {
		font-family: $default-font;
		font-size: $default-font-size;
	}
}

.components-placeholder__fieldset.is-column-layout,
.components-placeholder__fieldset.is-column-layout form {
	flex-direction: column;
}

.components-placeholder__input[type="url"] {
	@include input-control;
	flex: 1 1 auto;
}

.components-placeholder__error {
	width: 100%;
	gap: $grid-unit-10;
}


// Any `<Button />` component with `variant="link"` prop will need extra spacing if placed
// immediately after a button which is *not* an `variant="link"` style button. This is because
// `variant="link"` has no padding so we need to account for this to avoid the buttons butting
// up against each other. If it's the last item we don't need a right margin.
.components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link {
	margin-left: 10px; // equal to standard button inner padding
	margin-right: 10px; // equal to standard button inner padding

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

// Element queries to show different layouts at various sizes.
.components-placeholder {
	// Medium and small sizes.
	&.is-medium,
	&.is-small {
		.components-placeholder__instructions {
			display: none;
		}

		.components-placeholder__fieldset,
		.components-placeholder__fieldset form {
			flex-direction: column;
		}

		.components-placeholder__fieldset > *,
		.components-button {
			width: 100%;
			justify-content: center;
		}
	}

	&.is-small {
		padding: $grid-unit-20;
	}
}


/**
 * Dashed style placeholders
 */

// @todo
// These styles are only applied after the has-illustration gets added.
// This is mainly an issue in terms of Site Logo which has a brief flash of the square placeholder.
.components-placeholder.has-illustration {
	color: inherit;
	display: flex;
	box-shadow: none;

	// In the unselected state, radius should match Global Styles > Image > Radius.
	border-radius: 0;

	// Blur the background so layered dashed placeholders are still visually separate.
	// Make the background transparent to not interfere with the background overlay in placeholder-style() pseudo element
	backdrop-filter: blur(100px);
	background-color: transparent;

	// This appears to fix an occasional Chrome bug where the blurred background would have an incorrect color.
	backface-visibility: hidden;

	// Invert the colors in themes deemed dark.
	.is-dark-theme & {
		background-color: rgba($black, 0.1);
	}

	.components-placeholder__fieldset {
		// Unset intrinsic margins.
		margin-left: 0;
		margin-right: 0;
	}

	// Show placeholder buttons on block selection.
	// Note that these can't be display: none; or visibility: hidden;, as that breaks the writing flow.
	.components-placeholder__label,
	.components-placeholder__instructions,
	.components-button {
		opacity: 0;
		pointer-events: none;

		@media not (prefers-reduced-motion) {
			transition: opacity 0.1s linear;
		}
	}

	.is-selected > & {
		.components-placeholder__label,
		.components-placeholder__instructions,
		.components-button {
			opacity: 1;
			pointer-events: auto;
		}
	}

	&::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;
		background: currentColor;
		opacity: 0.1;
	}

	overflow: hidden;
	.is-selected & {
		overflow: auto;
	}
}

// Position the spinner.
// @todo these rules should ideally live with the spinner component itself.
.components-placeholder__preview {
	display: flex;
	justify-content: center;
}

.components-placeholder__illustration {
	box-sizing: content-box;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	stroke: currentColor;
	opacity: 0.25;
}