/**
 * Styles for Top Posts
 */
@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
@use "../../shared/styles/jetpack-variables";

.wp-block-jetpack-top-posts {
	margin-bottom: jetpack-variables.$jetpack-block-margin-bottom;

	img {
		width: 100%;
	}

	span {
		display: block;
		word-wrap: break-word;
	}

	&.is-list-layout .jetpack-top-posts-item {
		margin-bottom: jetpack-variables.$jetpack-block-margin-bottom;
	}

	&.is-grid-layout {

		.jetpack-top-posts-wrapper {
			align-items: flex-start;
			display: grid;
			grid: auto / repeat(6, 1fr);
			gap: 16px 12px;

			@media only screen and ( max-width: gb.$break-small ) {
				display: block;

				.jetpack-top-posts-mock-thumbnail {
					display: none;
				}

				.jetpack-top-posts-item {
					margin-bottom: jetpack-variables.$jetpack-block-margin-bottom;
				}
			}
		}

		.jetpack-top-posts-mock-thumbnail {
			background-color: gb.$gray-100;
			height: 0;
			padding-bottom: 75%;
			position: relative;
			width: 100%;
		}

		.jetpack-top-posts-thumbnail {
			aspect-ratio: 4 / 3;
			height: auto;
			object-fit: cover;
			max-width: 100%;
		}

		.jetpack-top-posts-item {
			grid-column: span 2;
		}

		// These rows should display two items.
		@for $i from 2 through 7 {

			@if $i == 2 or $i == 4 {
				&[data-item-count='#{$i}'] .jetpack-top-posts-item {
					grid-column: span 3;
				}
			}

			@if $i == 5 or $i == 7 {
				&[data-item-count='#{$i}'] .jetpack-top-posts-item:nth-child( 5n ),
				&[data-item-count='#{$i}'] .jetpack-top-posts-item:nth-child( 5n-1 ),
				&[data-item-count='#{$i}'] .jetpack-top-posts-item:nth-child( #{$i}n ),
				&[data-item-count='#{$i}'] .jetpack-top-posts-item:nth-child( #{$i}n-1 ) {
					grid-column: span 3;
				}
			}
		}
	}
}
