.stats-module__placeholder {
	display: block;
	padding: 0 24px;
	min-height: 140px;
	clear: both;

	// Block placeholder, primarily for SVGs and similar
	&.is-block {
		background: var(--color-neutral-0);
	}

	// Spinner placeholder, to be used in Summary views, where we already have some data
	&.is-void {
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 1;
	}

	&.is-chart {
		height: 228px;
	}
}

// Module Placeholder
.stats-module.is-loading {
	// Hide elements
	.module-header .site-icon,
	.module-header .toggle-info,
	.chart,
	.module-content-table,
	.stats-popular__item {
		display: none;
	}

	.module-header-link,
	.module-header-title {
		max-width: 120px;
		white-space: nowrap;
		overflow: hidden;

		.gridicon {
			display: none;
		}
	}

	// Make text invisible
	.module-content-list-header .label,
	.module-content-list-header .value,
	.module-header-title,
	ul.module-content-tabs li:hover .label,
	ul.module-content-tabs li.module-tab.is-selected:hover .label {
		color: color-mix(in srgb, var(--color-surface) 0%, transparent);
	}
}

// Show block placeholder on the summary page only
.stats-module.is-loading.summary .module-placeholder.is-block {
	display: block;
}
