@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/dataviews/build-style/style.css";

.sites-dataviews {
	table.dataviews-view-table .dataviews-view-table__row {
		th {
			vertical-align: middle;
		}

		td {
			// dataviews-override: We combine the icon and site title fields to form the horizontal "site" field.
			// Without this rule the combined field receives justify-content: space-between but we want the icon to be aligned with the text.
			// TODO: This can be removed when https://github.com/WordPress/gutenberg/pull/67226 / Gutenberg 19.8 lands in calypso.
			// See https://github.com/Automattic/wp-calypso/pull/96657#discussion_r1853690792
			.components-h-stack {
				&:has(.sites-dataviews__site) {
					justify-content: flex-start;
				}
			}
		}
	}

	.dataviews-view-list .dataviews-view-list__item-wrapper .dataviews-view-list__media-wrapper {
		background: var(--color-surface);
	}
}

.wpcom-site .main.hosting-dashboard-layout.sites-dashboard {
	.hosting-dashboard-layout__top-wrapper,
	.hosting-dashboard-layout__body {
		> * {
			// dataviews-override: To align with Core's hard-coded device width.
			// https://github.com/WordPress/gutenberg/blob/ed66cc50e3c0b6785a48c15230c090790c0b0e6c/packages/dataviews/src/components/dataviews/style.scss#L84
			// TODO: Remove when Core changes to use one of the predefined breakpoints.
			@media (max-width: 430px) {
				padding-inline: 24px;
			}
		}
	}
}

.wpcom-site .main.hosting-dashboard-layout.sites-dashboard.sites-dashboard__layout .sites-overview {
	.sites-banner-container {
		// dataviews-override: To align with Core's hard-coded device width.
		// https://github.com/WordPress/gutenberg/blob/ed66cc50e3c0b6785a48c15230c090790c0b0e6c/packages/dataviews/src/components/dataviews/style.scss#L84
		// TODO: Remove when Core changes to use one of the predefined breakpoints.
		@media (max-width: 430px) {
			padding-inline: 24px;
		}
	}
}

// Apply consistent 24px paddings to dataviews.
.wpcom-site:has(.is-global-sidebar-visible) .dataviews-wrapper {
	.dataviews__view-actions,
	.dataviews-filters__container,
	.dataviews-footer,
	.dataviews-view-grid {
		padding-inline: $grid-unit-30;
	}

	.dataviews-view-table tr td:first-child,
	.dataviews-view-table tr th:first-child {
		padding-inline-start: $grid-unit-30;
	}

	.dataviews-view-table tr td:last-child,
	.dataviews-view-table tr th:last-child {
		padding-inline-end: $grid-unit-30;
	}
}
