@import "@wordpress/base-styles/breakpoints";

$grid-horizontal-gutters: 24px;
$grid-vertical-gutters: 32px;

@function gutter-offset($blocks, $gutters, $gutter-width: $grid-horizontal-gutters) {
	@return ($gutter-width * $gutters) / $blocks;
}

.stats__module-list.stats__module--unified.subscribers-page {
	// Eliminate the vertical gap appended to the bottom of the grid.
	&::after {
		display: none;
	}
}

/* custom video stats style to allow for scrolling */
.is-section-stats .list-videoplays {
	overflow-x: auto;

	.stats-card--header-and-body {
		min-width: 100%;
	}
}

.is-section-stats .stats__module-list--traffic {
	.card.stats-module {
		margin-bottom: 0;
	}

	.stats__module-wrapper,
	.stats-card {
		width: 100%;
	}

	.stats__module-wrapper {
		display: flex;
		flex-flow: column nowrap;

		.stats-module,
		.stats-module__header {
			width: 100%;
		}

		.stats-module {
			flex-grow: 1;
		}
	}
}

// page level class
.is-section-stats {
	// grid level class
	.stats__module-list.stats__module-list--traffic,
	.stats__module-list.stats__module-list--insights,
	.stats__module-list.subscribers-page {
		&.stats__flexible-grid-container {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: $grid-vertical-gutters;
			gap: $grid-vertical-gutters $grid-horizontal-gutters;

			@media (max-width: $break-medium) {
				gap: 0;
			}

			.stats-card {
				width: 100%;
			}

			/* Module takes full row */
			.stats__flexible-grid-item--full {
				flex: 0 1 100%;
			}

			/* Module takes half row */
			.stats__flexible-grid-item--half {
				flex: 0 1 auto;
				box-sizing: border-box;
				max-width: calc(50% - $grid-horizontal-gutters / 2);
			}

			/* Module takes 1/3 row (spacing adjusted for when there are 2 blocks per row) */
			.stats__flexible-grid-item--one-third--once-space {
				flex: 0 1 auto;
				box-sizing: border-box;
				max-width: calc(33.33% - #{gutter-offset(2, 1)}); // at certain breakpints the container doesn't want to shrink without max-width
			}

			/* Module takes 1/3 row (spacing adjusted for when there are 3 blocks per row) */
			.stats__flexible-grid-item--one-third--two-spaces {
				flex: 0 1 auto;
				box-sizing: border-box;
				max-width: calc(33.33% - #{gutter-offset(3, 2)});
			}

			/* Module takes 2/3 row (spacing adjusted for when there are two blocks per row) */
			.stats__flexible-grid-item--two-thirds {
				flex: 0 1 auto;
				box-sizing: border-box;
				max-width: calc(66.66% - #{gutter-offset(2, 1)});
			}

			/* Module takes 40% (about 5/12) row (spacing adjusted for when there are 2 blocks per row) */
			.stats__flexible-grid-item--40--once-space {
				flex: 0 1 auto;
				box-sizing: border-box;
				max-width: calc(40% - #{gutter-offset(2, 1)}); // at certain breakpints the container doesn't want to shrink without max-width
			}

			/* Module takes 40% (about 5/12) row (spacing adjusted for when there are 3 blocks per row) */
			.stats__flexible-grid-item--40--two-spaces {
				flex: 0 1 auto;
				box-sizing: border-box;
				max-width: calc(40% - #{gutter-offset(3, 2)});
			}

			/* Module takes 60% (about 7/12) row (spacing adjusted for when there are two blocks per row) */
			.stats__flexible-grid-item--60 {
				flex: 0 1 auto;
				box-sizing: border-box;
				max-width: calc(60% - #{gutter-offset(2, 1)});
			}

			// sidebar + content // wide(2xl) is the max value so the classe is for an xlarge screen
			@media (max-width: $break-wide) {
				.stats__flexible-grid-item--full--xlarge {
					flex: 0 1 100%;
					max-width: 100%;
				}
			}

			// sidebar + content // xlarge is the max value so the classes are for a large screen
			@media (max-width: $break-xlarge) {
				// move 2/3 and 1/2 to full
				.stats__flexible-grid-item--full--large {
					flex: 0 1 100%;
					max-width: 100%;
				}

				// move 1/3 to 1/2
				.stats__flexible-grid-item--half--large {
					flex: 0 1 auto;
					box-sizing: border-box;
					max-width: calc(50% - $grid-horizontal-gutters / 2);
				}
			}

			// large breakpoint is the max width applicable so the CSS rule applies for a medium screen
			@media (max-width: $break-large) {
				/* Full row */
				.stats__flexible-grid-item--full--medium {
					flex: 0 1 100%;
					max-width: 100%;
				}
			}

			// no sidebar // medium breakpoint is the max width applicable so the CSS rule applies for a small screen
			@media (max-width: $break-medium) {
				/* Full row */
				.stats__flexible-grid-item--full--small {
					flex: 0 1 100%;
					max-width: 100%;
				}
			}
		}
	}
}
