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

.wp-block-post-template {
	margin-top: 0;
	margin-bottom: 0;
	max-width: 100%;
	list-style: none;
	padding: 0;
	// This block has customizable padding, border-box makes that more predictable.
	box-sizing: border-box;

	// These rules no longer apply but should be kept for backwards compatibility.
	&.is-flex-container {
		flex-direction: row;
		display: flex;
		flex-wrap: wrap;
		gap: 1.25em;

		> li {
			margin: 0;
			width: 100%;
		}

		@include break-small {
			@for $i from 2 through 6 {
				&.is-flex-container.columns-#{ $i } > li {
					width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));
				}
			}
		}
	}
}

@media ( max-width: $break-small ) {
	// Temporary specificity bump until "wp-container" layout specificity is revisited.
	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
		grid-template-columns: 1fr;
	}
}

.wp-block-post-template-is-layout-constrained > li > .alignright,
.wp-block-post-template-is-layout-flow > li > .alignright {
	float: right;
	margin-inline-start: 2em;
	margin-inline-end: 0;
}

.wp-block-post-template-is-layout-constrained > li > .alignleft,
.wp-block-post-template-is-layout-flow > li > .alignleft {
	float: left;
	margin-inline-start: 0;
	margin-inline-end: 2em;
}

.wp-block-post-template-is-layout-constrained > li > .aligncenter,
.wp-block-post-template-is-layout-flow > li > .aligncenter {
	margin-inline-start: auto;
	margin-inline-end: auto;
}