// Import the woocommerce components stylesheet
@import "~@woocommerce/components/build-style/style.css";

// Hack to hide preview overflow.
.editor-block-preview__content {
	overflow: hidden;
}

// Align the block icons in edit mode
.components-placeholder__label .gridicon,
.components-placeholder__label .material-icon {
	margin-right: 1ch;
	fill: currentColor;
}

.wc-block-products-grid {
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;

	&.is-loading,
	&.is-not-found,
	&.cols-1 {
		display: block;
	}

	.wc-product-preview {
		flex: 1;
		padding: $gap/2;
	}

	@for $i from 2 to 7 {
		&.cols-#{$i} .wc-product-preview {
			max-width: calc(#{ 100% / $i });
			min-width: calc(#{ 100% / $i });
			flex: 1;
		}
	}

	&.components-placeholder {
		padding: 2em 1em;
	}

	// Styles for "resuable block" preview.
	.editor-block-preview & {
		min-width: 5em;

		@for $i from 1 to 7 {
			&.cols-#{$i} {
				min-width: $i * 5em;
			}
		}

		&.is-loading,
		&.is-not-found {
			min-width: auto;
		}
	}
}