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

.wp-block-latest-posts {
	// This block has customizable padding, border-box makes that more predictable.
	box-sizing: border-box;

	&.alignleft {
		/*rtl:ignore*/
		margin-right: 2em;
	}
	&.alignright {
		/*rtl:ignore*/
		margin-left: 2em;
	}
	&.wp-block-latest-posts__list {
		list-style: none;

		li {
			clear: both;
			overflow-wrap: break-word;
		}
	}

	&.is-grid {
		display: flex;
		flex-wrap: wrap;

		li {
			margin: 0 1.25em 1.25em 0;
			width: 100%;
		}
	}

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

				&:nth-child(#{ $i }n) {
					margin-right: 0;
				}
			}
		}
	}
}

:root {
	:where(.wp-block-latest-posts.is-grid) {
		padding: 0;
	}
	:where(.wp-block-latest-posts.wp-block-latest-posts__list) {
		padding-left: 0;
	}
}

.wp-block-latest-posts__post-date,
.wp-block-latest-posts__post-author {
	display: block;
	font-size: 0.8125em;
}

.wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts__post-full-content {
	margin-top: 0.5em;
	margin-bottom: 1em;
}

.wp-block-latest-posts__featured-image {
	a {
		display: inline-block;
	}
	img {
		height: auto;
		width: auto;
		max-width: 100%;
	}
	&.alignleft {
		/*rtl:ignore*/
		margin-right: 1em;
		/*rtl:ignore*/
		float: left;
	}
	&.alignright {
		/*rtl:ignore*/
		margin-left: 1em;
		/*rtl:ignore*/
		float: right;
	}
	&.aligncenter {
		margin-bottom: 1em;
		text-align: center;
	}
}