:where(.wp-block-woocommerce-legacy-template) {
	margin-left: auto;
	margin-right: auto;
}

.wp-block-woocommerce-classic-template__placeholder-warning {
	border-left: 5px solid #2181d2;
	padding-left: em(40px);
}
.wp-block-woocommerce-classic-template__placeholder .components-placeholder__fieldset {
	display: grid;
	grid-template-columns: 1fr;
}
.wp-block-woocommerce-classic-template__placeholder-wireframe,
.wp-block-woocommerce-classic-template__placeholder-copy {
	grid-row-start: 1;
	grid-column-start: 1;
	transition: 0.3s all ease;
}
.wp-block-woocommerce-classic-template__placeholder-copy {
	border: 1px solid $gray-900;
	background-color: #fff;
	padding: $gap-large $gap-larger;
	border-radius: $universal-border-radius;
	display: flex;
	flex-direction: column;
	max-width: 900px;
	width: 400px;
	margin: auto;
	opacity: 0;
	z-index: 10;

	.wp-block-woocommerce-classic-template__placeholder-copy__icon-container {
		margin: 0 0 $gap;

		span {
			@include font-size(larger);
			display: block;
		}
		.woo-icon {
			color: #{$studio-woocommerce-purple};
			@include font-size(large);

			svg {
				vertical-align: middle;
			}
		}
	}
	p {
		margin: 0 0 $gap;
	}
	.wp-block-woocommerce-classic-template__placeholder-migration-button-container {
		justify-content: center;
		margin: $gap 0;
	}
}
.wp-block-woocommerce-classic-template__placeholder-wireframe {
	pointer-events: none;

	// Image based placeholders should fill horizontal width.
	> img {
		width: 100%;
	}
}

.wp-block-woocommerce-legacy-template {
	.components-placeholder {
		box-shadow: none;
		padding: 0;
	}
}
.wp-block-woocommerce-legacy-template.is-selected {
	.wp-block-woocommerce-classic-template__placeholder-wireframe {
		filter: blur(3px);
		opacity: 0.5;

		* {
			color: $gray-200 !important;
			border-color: $gray-200 !important;
		}
	}
	.wp-block-woocommerce-classic-template__placeholder-copy {
		opacity: 1;
	}
	.components-placeholder {
		box-shadow: inherit;
	}
}