// 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;

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

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

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

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

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

// @todo Remove this once all grid blocks are switched to dynamic.
.wc-block-products-grid {
	display: flex;
	flex-wrap: wrap;

	&.cols-1 {
		display: block;

		.wc-block-grid__product {
			margin-left: auto;
			margin-right: auto;
		}
	}

	@for $i from 2 to 9 {
		&.cols-#{$i} .wc-block-grid__product {
			flex: 1 0 calc(#{ 100% / $i });
			max-width: 100% / $i !important;
		}
	}

	&.cols-4:not(.alignwide):not(.alignfull),
	&.cols-5:not(.alignfull),
	&.cols-6:not(.alignfull),
	&.cols-7,
	&.cols-8 {

		.wc-block-grid__product-title {
			font-size: 0.9em;
		}

		.wc-block-grid__product-price {
			font-size: 0.8em;
		}

		.wc-block-grid__product-add-to-cart {
			font-size: 0.8em !important;
			line-height: 1.4 !important;
		}
	}
}