/* #A1DASHASYNC — fixed-size skeleton for our asynchronously loaded dashboard widgets. */

.wi-dash-async {
	position: relative;
	margin: 0;
	box-sizing: border-box;
}

.wi-dash-async__skel {
	position: absolute;
	inset: 8px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	opacity: .9;
	pointer-events: none;
}

.wi-dash-async__skel span {
	display: block;
	height: 12px;
	border-radius: 4px;
	background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 37%, #eef0f3 63%);
	background-size: 400% 100%;
	animation: wi-dash-async-shimmer 1.4s ease-in-out infinite;
}

.wi-dash-async__skel span:nth-child(1) { width: 46%; height: 18px; }
.wi-dash-async__skel span:nth-child(2) { width: 78%; }
.wi-dash-async__skel span:nth-child(3) { width: 64%; }
.wi-dash-async__skel span:nth-child(4) { width: 88%; height: 40px; }

.wi-dash-async.is-loaded .wi-dash-async__skel,
.wi-dash-async.is-loaded .wi-dash-async__note {
	display: none;
}

.wi-dash-async__note {
	margin: 0;
	padding: 2px 0 6px;
	color: #646970;
	font-size: 12px;
}

.wi-dash-async__note.is-error {
	color: #b32d2e;
}

@keyframes wi-dash-async-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wi-dash-async__skel span { animation: none; }
}